Carteasian Coordinates

• I picked this up in algebra, trig and calc.
• We graph things with a "line" system called Cartesian coordinates.
  • Points in two space are determined by a pair (x,y)
    • x represents the distance from the origin along the x axis.
    • y represents the distance from the origin along the y axis.

• 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
  • Attributes
    • The values of these primitives.
  • For the HTML 5 canvas in the 2d context
    • Reference (I can not write code without this)
  • 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>
      let lineCanvas = document.getElementById("lines"); 
      let 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".
  • 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.

    • <canvas id="text" width="300" height="200" style="border:1px solid #000000;"></canvas>
      <script>
      let textCanvas = document.getElementById("text"); 
      let textCTX = textCanvas.getContext('2d');
      
      let textW = textCanvas.width;
      let 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>
    let circleCanvas = document.getElementById("circle"); 
    let circleCTX = circleCanvas.getContext('2d');
    let circleW = circleCanvas.width;
    let circleH = circleCanvas.height;
    
    // 24 is arbitrary, it looked good.
    // needed to be > to 18
    let r = circleW/24;
    
    // 9 is not, there are 8 points 1/9, 2/9 .. 8/9
                  0/9 is the left wall and 9/9 is the right wall.
    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>