• NO interactive content (i.e., no events)
• the <canvas> tag looks like this:

  <canvas id="id for this canvas" width="pixel width" height="pixel height"></canvas>

• the javascript will first contain a graphics handle or "context"

  var name_for_the_canvas_object  = document.getElementById("id for this canvas");
  var name_for_the_canvas_context = name_for_the_canvas_object.getContext("2d");
  

  If the "id" of the canvas is for example "fred" (i.e., < canvas id="fred"...), then in the javascript you could say:
  var alice = document.getElementById("fred");
  var david = alice.getContext("2d");

  Then aLL the canvas methods use "david" as the canvas context name:

  david.any_canvas_method

  You can also control some attributes of the canvas by getting or setting the CSS style properties of the of the canvas (i.e.,

  document.getElementById("id for this canvas").style.css_property.value
  

  Here is the HTML canvas for a 100 x 50 blue bordered canvas:

  <canvas id="canvas1" width="400" height="60" style="border:solid blue 1px;">This broswer does NOT support CANVAS</canvas>

  This browser does NOT support CANVAS

Below are the detailed CANVAS functions and some examples: