Drawing on the Canvas

• Code 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
• Rectangles
  • ctx.strokeRect(x,y,w,h);
  • ctx.fillRect(x,y,w,h);
  • ctx.clearRect(0,0,width,height) will clear the screen
  • strokeStyle and fillStyle apply here
  • Other attributes apply as well ctx.lineWidth

  • const rectCanvas = document.getElementById("rects"); 
    const rectCTX = rectCanvas.getContext('2d');
    
    rectCTX.strokeStyle = "green"
    rectCTX.strokeRect(10,10,20,20)
    
    rectCTX.strokeStyle="red"
    rectCTX.fillStyle="blue"
    rectCTX.fillRect(40,40,10,30)
    
    rectCTX.lineWidth = 3
    rectCTX.strokeStyle="black"
    rectCTX.fillStyle="cyan"
    rectCTX.fillRect(40,80,40,10)
    rectCTX.strokeRect(40,80,40,10)
    
    rectCTX.lineWidth = 4
    rectCTX.strokeStyle="blue"
    rectCTX.fillStyle="red"
    rectCTX.strokeRect(50,20,40,10);
    rectCTX.fillRect(50,20,40,10);
    

  • The last one, (blue border red fill) looks like the border is not as wide as the previous, that is because?
• lines
  • Lines are actually part of a path.
  • Start with ctx.beginPath()
    • This clears things out, so use this to start a "new" set of lines.
    • Later for a polygon, we will use many 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()
        
        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()

• 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 each object into its polygonstriangles.
    • 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 No Fill Even Odd Non-Zero
      Select a Dataset Line Loop Broken Diamond
  • The code for this demo.
• 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>