Cartesian Coordinates

To make the above drawing

A Graphics API (Application Programming Interface) generally has a set of primitives and these primitives have attributes.
Primitives
- The things the system can draw
- lines
- rectangles
- text
- images
- quadratic curves
Attributes
- Values that change the way these primitives are drawn.
For the HTML 5 canvas in the 2d context
- Reference
We saw rectangles
- ctx.strokeRect(x,y,w,h);
- ctx.fillRect(x,y,w,h);
- ctx.clearRect(0,0,width,height) will clear the screen
lines
- Lines are actually part of a path.
- Start with ctx.beginPath()
  - This clears the lines, so use this to start a "new" set of lines.
- End with ctx.stroke()
- Move with drawing ctx.moveTo()
- Draw with drawing ctx.lineTo()
- They have many attributes, for now we want
  - ctx.strokeStyle
  - ctx.lineWidth
- ```
<canvas id="lines" width="100" height="100" style="border:1px solid #000000;"></canvas>
<script>
const lineCanvas = document.getElementById("lines"); 
const lineCTX = lineCanvas.getContext('2d');

lineCTX.lineWidth = 10;
lineCTX.beginPath();
lineCTX.moveTo(0,0);
lineCTX.lineTo(100,100);
lineCTX.stroke();

lineCTX.beginPath();
lineCTX.strokeStyle="red";
lineCTX.moveTo(100,0);
lineCTX.lineTo(0,100);
lineCTX.stroke();
</script>
```
- Notice the last element drawn is "on top".
Other attributes include
- lineCap
  - How do I draw the end of a line.
  - "butt", Even with the end of the line
  - "round", half circle at the end of the line
  - "square" goes over the end of the line
  - ```
  const ctx=document.getElementById("ends").getContext("2d")
  
  ctx.strokeStyle = "red"
  ctx.beginPath()
  ctx.moveTo(10,10)
  ctx.lineTo(90,10)
  ctx.moveTo(10,90)
  ctx.lineTo(90,90)
  ctx.stroke()
  
  // line 1
  ctx.strokeStyle="black"
  ctx.lineWidth=10
  ctx.lineCap = "butt"
  
  ctx.beginPath()
  ctx.moveTo(20,10)
  ctx.lineTo(20,90)
  ctx.stroke()
  
  ctx.lineCap = "round"
  ctx.beginPath()
  ctx.moveTo(50,10)
  ctx.lineTo(50,90)
  ctx.stroke()
  
  ctx.lineCap = "square"
  ctx.beginPath()
  ctx.moveTo(80,10)
  ctx.lineTo(80,90)
  ctx.stroke()
                        
```
- Line dashes are another attribute of lines.
  - ctx.setLineDash()
  - Takes a "pattern" array for dashes.
  - This is expected to contain an even number of elements.
  - If this is not the case, the pattern is doubled.
  - If The array is empty, the line is solid.
  - lineDashOffset controls where in the line you start.
  - This is the number of pixels into the pattern.
  - ```
  const dashCTX = document.getElementById("dashes").getContext("2d")
  
  dashCTX.setLineDash([1,1,1,1,1,4,3,4])
  dashCTX.lineWidth=2
  
  dashCTX.beginPath()
  dashCTX.moveTo(10,10)
  dashCTX.lineTo(90,10)
  dashCTX.stroke()
  
  dashCTX.lineDashOffset = 7
  
  dashCTX.beginPath()
  dashCTX.moveTo(10,20)
  dashCTX.lineTo(90,20)
  dashCTX.stroke()
  
  dashCTX.setLineDash([])
  dashCTX.beginPath()
  dashCTX.moveTo(10,30)
  dashCTX.lineTo(90,30)
  dashCTX.stroke()
  
  dashCTX.setLineDash([10, 4, 20])
  dashCTX.beginPath()
  dashCTX.moveTo(10,40)
  dashCTX.lineTo(90,40)
  dashCTX.stroke()
  console.log(dashCTX.getLineDash())
```

Drawing a filled shape

Draw a path.
End with ctx.fill()
This uses the cxt.fillStyle property.

const fillACTX = document.getElementById("filla").getContext("2d")

fillACTX.fillStyle = "red"
fillACTX.strokStyle = "black"

fillACTX.beginPath()
fillACTX.moveTo(10,10)
fillACTX.lineTo(10,90)
fillACTX.lineTo(90,90)
fillACTX.lineTo(90,10)
fillACTX.fill()
fillACTX.stroke()

fillACTX.fillStyle = "blue"
fillACTX.beginPath()
fillACTX.moveTo(20,20)
fillACTX.lineTo(20,80)
fillACTX.lineTo(80,80)
fillACTX.lineTo(80,20)
fillACTX.fill()
fillACTX.stroke()

fillACTX.fillStyle = "green"
fillACTX.beginPath()
fillACTX.moveTo(30,30)
fillACTX.lineTo(30,70)
fillACTX.lineTo(70,70)
fillACTX.fill()
fillACTX.stroke()

Note that the "stacking" order is the order in which things are drawn.
This is sometimes called the "painters algorithm"
- ```
Sort the objects by depth (might be user responsibility)
For each object
   render it
                 
```
- If we are working with complex objects, first turn ea object into its polygons.
- This works well in 2d.
- And in 3d where there are no crossing of objects.

Winding rule

For self intersecting shapes there are at least two rules for filling.

The EVEN-ODD rule

start at any point on the canvas.
draw a ray to the edge
count the number of edges the point crosses.
if the number is even
   the point is outside the area, don't fill it.
else
   the point is inside, fill it.

There are special cases for
- Inflection points. (count as 1)
- Local max/min (count as two)
- lines crossing (count as two)

The NON-ZERO winding rule

start at any point on the canvas.
draw a ray to the edge
parity = 0
For every edge the ray intersects
   If the curve crosses the ray from left to right 
      ++parity
   else 
      --parity
if parity == 0
   it is outside, don't fill
else
   it is inside, fill

Again, there are special cases at max, min, inflection and crossing points.

We will discuss this much later in rasterization.

Select a Fill Style

Select a Dataset

The code for this demo is here

Text

ctx.strokeText(text, x, y);
ctx.fillText(text, x, y);
Ends with ctx.stroke() or ctx.fill()
Uses fill or stroke attributes.
- ctx.fillStyle, ctx.strokeStyle
also ctx.font = "font"
ctx.measureText(string) allows us to find the dimensions of the text.
reference
It reutrns a textMetric
actualBoundingBoxAscent returns a distance from the baseline to the highest letter.

<canvas id="text" width="300" height="200" style="border:1px solid #000000;"></canvas>
<script>
const textCanvas = document.getElementById("text"); 
const textCTX = textCanvas.getContext('2d');

const textW = textCanvas.width;
const textH = textCanvas.height;
let height = 0;

textCTX.strokeStyle = "green";
textCTX.beginPath();

for(let fs=10; fs <= 60; fs+=10) {
    let font = fs+"px sans";
    textCTX.font= font;

    let atribs  = textCTX.measureText("Hello");
    height += 1.2*atribs.actualBoundingBoxAscent;

    textCTX.beginPath();
    textCTX.strokeText("Hello", (textW-atribs.width)/2, height);

    textCTX.stroke();
}
</script>

Circle

ctx.arc(x,y, radius, start, stop, direction);
Angles are in radians 0 to 2*Math.PI
Last arugment true -> counterclockwise
needs a ctx.beginPath();
ends with ctx.fill() or ctx.stroke().

<canvas id="circle" width="600" height="200" style="border:1px solid #000000;"></canvas>
<script>
const circleCanvas = document.getElementById("circle"); 
const circleCTX = circleCanvas.getContext('2d');
const circleW = circleCanvas.width;
const circleH = circleCanvas.height;

// 24 is arbitrary, it looked good.
// needed to be > to 18
let r = circleW/24;

let d = circleW/9;

circleCTX.fillStyle = "blue";
circleCTX.font = "15pt sans";

for(let i=1; i <= 8; i++) {
    circleCTX.strokeStyle = "red";
    circleCTX.beginPath();

    // remember, we are upside down, so the second angle is a -
    circleCTX.arc(d*i, .5*d, r, 0, -Math.PI/4 *i, true);
    circleCTX.stroke();

    circleCTX.fillStyle = "blue";
    circleCTX.beginPath();
    circleCTX.arc(d*i, 1.5*d, r, 0, -Math.PI/4 * i);
    circleCTX.fill();

    circleCTX.fillStyle = "black";
    circleCTX.beginPath();
    // u00B0 is unicode for the degree symbol.
    circleCTX.fillText(" "+ i*45 + "\u00b0", d*(i-.25), 2.5*d);
    circleCTX.fill();
} 
</script>

Code for the first picture