The Canvas Element

• The HTML element we will work with the most is the html5 canvas.
  • reference.
• canvas
  • The element requires a closing tag.
  • Contents are restricted, but we probably won't use any.
  • Attributes include
    • width, height
    • These are given in pixels.
  • I throw in a border attribute to make it easier to see where the canvas is.
    • Consider this a frame.
• My default line is something like:

  • <canvas id="CanvasElement" width="100" height="100" style="border:1px solid black;"></canvas>
        

  • I change the name, width and height to suit my usage.
• Drawing on the canvas is done in javascript.
  • I will do inline code here.
• The first step is to get the canvas and set the context.

  • const canvas = document.getElementById("CanvasElement");
    const ctx = canvas.getContext('2d');
            

  • Note, the javascript code must execute after the element is declared.
    • You must:
      • Declare canvas element
      • Execute code to access canvas element.
    • This means to mix your code in the document
    • OR better yet, load a script with the defer tag.
• The context
  • Described here.
  • This is an interface to the canvas.
  • It provides the methods for "drawing" on the canvas.
• For the first part of the semester, we will use the 2d context.
  • Described here
  • Later we will use the "WebGL" context for 3d graphics.
• The canvas provides a 2d grid where we can draw objects.
  • The upper left hand corner is (0,0)
  • The lower right hand corner is (width, height)
  • Label The Corners
    • The button will execute this function

    • <script>
      function LabelCorners() {
          ctx.strokeStyle="red"
          ctx.fillStyle="blue"
      
          ctx.beginPath()
          ctx.moveTo(0,0)
          ctx.lineTo(1,1)
      
          ctx.fillText("(0,0)", 2,10)
      
          ctx.moveTo(canvas.width-1, canvas.height-1)
          ctx.lineTo(canvas.width,canvas.height)
      
          ctx.moveTo(10, canvas.height-10);
          ctx.lineTo(canvas.width-10, 10);
      
          let pos = "(" + canvas.width + ", " + canvas.height + ")"
          ctx.fillText(pos, canvas.width-50, canvas.height-5)
      
          ctx.stroke()
      }
      </script>
                  

    • By the way, the code for the button is

    • <button type="button" onClick="LabelCorners()">Label The Corners</button>
                 

  • The code for the button and the script can be in any order.
    • This is because the browser "lifts" the function declaration on parsing.
  • We will be learning the 2d canvas interface next.