General tool functions

CanvasRenderingContext2D.addGrid (delta, color, font)

    CanvasRenderingContext2D.prototype.addGrid = function (delta, color, font) {
      // define the default values for the optional arguments
      if (! arguments[0]) { delta = 25; }
      if (! arguments[1]) { color = 'blue'; }
      if (! arguments[2]) { font = '8px sans-serif'; }
      // extend the canvas width and height by delta
      var oldWidth = this.canvas.width;
      var oldHeight = this.canvas.height;      
      this.canvas.width = oldWidth + delta;
      this.canvas.height = oldHeight + delta;        
      // draw the vertical and horizontal lines
      this.lineWidth = 0.1;
      this.strokeStyle = color;
      this.beginPath();
      for (var i = 0; i * delta < oldWidth; i ++) {
        this.moveTo (i * delta, 0);
        this.lineTo (i * delta, oldHeight);
      }
      for (var j = 0; j * delta < oldHeight; j ++) {
        this.moveTo (0, j * delta);
        this.lineTo (oldWidth, j * delta);
      }
      this.closePath();
      this.stroke();
      // draw a thicker line, which is the border of the original canvas
      this.lineWidth = 0.5;
      this.beginPath();
      this.moveTo(0,0);
      this.lineTo(oldWidth,0);
      this.lineTo(oldWidth,oldHeight);
      this.lineTo(0,oldHeight);
      this.lineTo(0,0);
      this.closePath();
      this.stroke();
      // set the text parameters and write the number values to the vertical and horizontal lines
      this.font = font;
      this.lineWidth = 0.3;
      // 1. writing the numbers to the x axis
      var textY = oldHeight + Math.floor(delta/2); // y-coordinate for the number strings
      for (var i = 0; i * delta <= oldWidth; i ++) {
        this.strokeText (i * delta, i * delta, textY);        
      }
      // 2. writing the numbers to the y axis
      var textX = oldWidth + 5; // x-coordinate for the number strings
      for (var j = 0; j * delta <= oldHeight; j ++) {
        this.strokeText (j * delta, textX, j * delta);
      }
    };

CanvasRenderingContext2D.addTransGrid (a, b, c, d, e, f, delta, gridColor, frameColor, font)

    CanvasRenderingContext2D.prototype.addTransGrid = function (a, b, c, d, e, f, delta, gridColor, frameColor, font) {
      // define the default values for the optional arguments
      if (typeof arguments[6] === "undefined") { delta = 25; }
      if (typeof arguments[7] === "undefined") { gridColor = 'blue'; }
      if (typeof arguments[8] === "undefined") { frameColor = 'red'; }
      if (typeof arguments[9] === "undefined") { font = '8px sans-serif'; }
      // local function, where trans([x0,y0])===[x,y] is new coordinate point for the given point [x0,y0]
      var trans = function (point) {
        var x = point[0];
        var y = point[1];
        return [(a*x)+(c*y)+e, (b*x)+(d*y)+f];
      }
      // original (old) canvas width and height
      var w = this.canvas.width;
      var h = this.canvas.height;
      // compute the new four corner points of the old canvas border
      var lup = trans ([0, 0]);   // left upper point
      var llp = trans ([0, h]);   // left lower point
      var rup = trans ([w, 0]);   // right upper point
      var rlp = trans ([w, h]);   // right lower point 
      // compute the lowest and highest x and y values of both the old and the new canvas border
      var minX = Math.min (lup[0], llp[0], rup[0], rlp[0], 0);      // is negative or zero
      var maxX = Math.max (lup[0], llp[0], rup[0], rlp[0], w);      // is positive, at least w
      var minY = Math.min (lup[1], llp[1], rup[1], rlp[1], 0);      // is negative or zero
      var maxY = Math.max (lup[1], llp[1], rup[1], rlp[1], h);      // is positve, at least h
      // compute the offset for the x and y axis
      var xOff   =  (minX < 0 ? -minX : 0) + delta;  // is positive
      var yOff   =  (minY < 0 ? -minY : 0) + delta;  // is positive
      // resize the canvas
      new_w  = xOff + maxX + delta;
      new_h = yOff + maxY + delta;     
      this.canvas.width  = new_w;
      this.canvas.height = new_h;     
      // offTrans([x,y]) returns the transformed point [x',y'] that takes care of the offset
      function offTrans (p) {
        var newP = trans(p)
        return ([xOff + newP[0], yOff + newP[1]]);
      };
      // draw the frame, i.e. the border of the original canvas
      this.strokeStyle = frameColor;
      this.lineWidth = 3.0;
      this.lineJoin = 'miter';
      this.lineCap = 'round';
      this.strokeRect (xOff, yOff, w, h);
      // draw the new grid
      this.strokeStyle = gridColor;
      this.lineWidth = 1.0;
      this.beginPath();
      for (var i = 0; i*delta <=w; i++) {
        var p = offTrans ([i*delta, 0]);
        var q = offTrans ([i*delta, h]);
        this.moveTo (p[0], p[1]);
        this.lineTo (q[0], q[1]);
      }
      for (var j = 0; j * delta <= h; j++) {
        var p = offTrans ([0, j*delta]);
        var q = offTrans ([w, j*delta]);
        this.moveTo (p[0], p[1]);
        this.lineTo (q[0], q[1]);
      }
      this.stroke();
      // draw the two arrows for the new grid
      this.strokeStyle = gridColor;
      this.lineWidth = 3.0;
      this.lineJoin = 'miter';
      this.lineCap = 'round';
      var arrSize = 5; // size of the arrow head
      this.beginPath();
        // x-arrow
        this.moveTo (offTrans([0,0])[0], offTrans([0,0])[1]);
        this.lineTo (offTrans([w,0])[0], offTrans([w,0])[1]);
        this.moveTo (offTrans([w-arrSize,-arrSize])[0], offTrans ([w-arrSize,-arrSize])[1]);
        this.lineTo (offTrans([w,0])[0], offTrans([w,0])[1]);
        this.moveTo (offTrans([w-arrSize,arrSize])[0], offTrans ([w-arrSize,arrSize])[1]);
        this.lineTo (offTrans([w,0])[0], offTrans([w,0])[1]);
        // y-arrow
        this.moveTo (offTrans([0,0])[0], offTrans([0,0])[1]);
        this.lineTo (offTrans([0,h])[0], offTrans([0,h])[1]);
        this.moveTo (offTrans([-arrSize,h-arrSize])[0], offTrans([-arrSize,h-arrSize])[1]);
        this.lineTo (offTrans([0,h])[0], offTrans([0,h])[1]);
        this.moveTo (offTrans([arrSize,h-arrSize])[0], offTrans([arrSize,h-arrSize])[1]);
        this.lineTo (offTrans([0,h])[0], offTrans([0,h])[1]);
      this.stroke();
      // write the text; first the numbers of the x-axis
      this.textBaseline = 'middle';
      this.textAlign = 'center';
      this.fillStyle = gridColor; 
      var halfDelta = - Math.floor (delta / 2); // y-coordinate for the number strings
      for (var i = 0; i * delta <= w; i++) {
        this.fillText (i*delta, offTrans ([i*delta, halfDelta])[0], offTrans ([i*delta, halfDelta])[1]);
      }
      for (var j = 0; j * delta <= h; j++) {
        this.fillText (j*delta, offTrans ([halfDelta, j*delta])[0], offTrans ([halfDelta, j*delta])[1]);
      }
      // write `x` and `y`
      this.fillText ('x', offTrans ([w-halfDelta, 0])[0], offTrans ([w-halfDelta,0])[1]);
      this.fillText ('y', offTrans ([0, h-halfDelta])[0], offTrans ([0, h-halfDelta])[1]);
    }

Derived transformation grids

CanvasRenderingContext2D.prototype.addScaledGrid = function (x, y, delta, gridColor, frameColor, font)

    CanvasRenderingContext2D.prototype.addScaledGrid = function (x, y, delta, gridColor, frameColor, font) {
      this.addTransGrid (x, 0, 0, y, 0, 0, delta, gridColor, frameColor, font);
    };

CanvasRenderingContext2D.prototype.addRotatedGrid (angle, delta, gridColor, frameColor, font)

    CanvasRenderingContext2D.prototype.addRotatedGrid = function (angle, delta, gridColor, frameColor, font) {
      var c = Math.cos(angle);
      var s = Math.sin(angle);
      this.addTransGrid (c, s, -s, c, 0, 0, delta, gridColor, frameColor, font);
    };

CanvasRenderingContext2D.prototype.addTranslatedGrid (x, y, delta, gridColor, frameColor, font)

    CanvasRenderingContext2D.prototype.addTranslatedGrid = function (x, y, delta, gridColor, frameColor, font) {
      this.addTransGrid (1, 0, 0, 1, x, y, delta, gridColor, frameColor, font);
    };

CanvasRenderingContext2D.prototype.addShearedGrid (x, y, delta, gridColor, frameColor, font)

    CanvasRenderingContext2D.prototype.addShearedGrid = function (x, y, delta, gridColor, frameColor, font) {
      this.addTransGrid (1, y, x, 1, 0, 0, delta, gridColor, frameColor, font);
    };

CanvasRenderingContext2D.prototype.addStandardGrid (x, y, delta, gridColor, frameColor, font)

    CanvasRenderingContext2D.prototype.addStandardGrid = function (delta, gridColor, frameColor, font) {
      this.addTransGrid (1, 0, 0, 1, 0, 0, delta, gridColor, frameColor, font);
    };

CanvasRenderingContext2D.prototype.addRotateAboutGrid (angle, x, y, delta, gridColor, frameColor, font)

    CanvasRenderingContext2D.prototype.addRotateAboutGrid = function (angle, x, y, delta, gridColor, frameColor, font) {
      var c = Math.cos(angle);
      var s = Math.sin(angle);
      this.addTransGrid (c, -s, s, c, -x*c-y*s+x, x*s-y*c+y, delta, gridColor, frameColor, font);
    };

composeTransform ([a1,b1,c1,d1,e1,f1], [a2,b2,c2,d2,e2,f2])

takes the two transformation parameter sixtuples and returns the composed sixtuple [a3,b3,c3,d3,e3,f3].

    function composeTransform (arr1, arr2) {
      if (Array.isArray (arr1) && Array.isArray (arr2)) {
        if (arr1.length === 6 && arr2.length === 6) {
          // components of arr1
          var a1 = arr1[0]; 
          var b1 = arr1[1]; 
          var c1 = arr1[2]; 
          var d1 = arr1[3]; 
          var e1 = arr1[4]; 
          var f1 = arr1[5];
          // components of arr2
          var a2 = arr2[0]; 
          var b2 = arr2[1]; 
          var c2 = arr2[2]; 
          var d2 = arr2[3]; 
          var e2 = arr2[4]; 
          var f2 = arr2[5];
          // components of the resulting array
          var a3 = (a2 * a1) + (c2 * b1);
          var b3 = (b2 * a1) + (d2 * b1);
          var c3 = (a2 * c1) + (c2 * d1);
          var d3 = (b2 * c1) + (d2 * d1);
          var e3 = (a2 * e1) + (c2 * f1) + e2;
          var f3 = (b2 * e1) + (d2 * f1) + f2;
          return [a3, b3, c3, d3, e3, f3];
        } else {
          throw Error ("The two array arguments of composeTransform(arr1,arr2) must both have six components each.");
        }
      } else {
        throw Error ("The two arguments of composeTransform(arr1,arr2) must both be arrays.");
      }
    };

Local functions

canvasIdList()

returns the list of id values of all the <canvas> elements in the text. A call of canvasIdList() from the Firebug console returns

 ["VeryFirstExampleCanvas", "LittleTricolour", null, null, "ContextAccessTemplate1", "GridExplained1", ...]

The null entries come from the <canvas> tags without id attribute.

  function canvasIdList () {
    var canvasList = document.getElementsByTagName('canvas'); // now an array of HTMLCanvasElement objects
    var idList = [];
    for (var i = 0; i < canvasList.length; i++) {
      idList.push (canvasList[i].getAttribute('id'));
    }
    return idList;
  };

TheallCanvasDrawings() --- begin of the function

The remainder of this file contains the scripts for the <canvas> elements in the main document file CanvasHandbook.html and CanvasHandbook.markdown, respectively. All these scripts are simply concatenated and wrapped in a function addCanvasDrawings().

This function is then called when the document has loaded, i.e. it is registered as the event listener

window.onload = allCanvasDrawings;

as described in the "Third template" of the appendix on file templates.

  function allCanvasDrawings () {

allCanvasDrawings() --- begin of the function

VeryFirstExampleCanvas

      var canvas = document.getElementById ('VeryFirstExampleCanvas');    // access the canvas object
      var context = canvas.getContext ('2d');                             // access the canvas context
      context.fillStyle = 'red';                                          // set the color to 'red'
      context.fillRect (0,0,150,60);                                      // draw a red box on the whole of the canvas
      context.fillStyle = 'yellow';                                       // set the color to 'yellow'
      context.fillRect (5,5,140,50);                                      // draw a yellow box inside the red on
      context.fillStyle = 'red';                                          // set the color back to 'red'
      context.font = '40pt Arial';                                        // define the CSS font for writing text
      context.fillText ('Hello',10,50);                                   // write the text 'Hello'

Tricolour

      // First, get hold of the canvas object and its context
      var tricolourCanvas = document.getElementById('LittleTricolour');
      var tricolourCanvasContext = tricolourCanvas.getContext('2d');
      // Now do the real drawings:
      tricolourCanvasContext.fillStyle = '#0055A4';    // set the color to blue
      tricolourCanvasContext.fillRect ( 0, 0, 40, 90); // draw a blue rectangle on the left
      tricolourCanvasContext.fillStyle = '#FFFFFF';    // set the color to white
      tricolourCanvasContext.fillRect (40, 0, 40, 90); // draw a white rectangle in the middle
      tricolourCanvasContext.fillStyle = '#EF4135';    // set the color to red
      tricolourCanvasContext.fillRect (80, 0, 40, 90); // draw a red rectangle on the right

ContextAccessTemplate1

    var canvas = document.getElementById('ContextAccessTemplate1');
    canvas.width = 800;
    canvas.height = 280;
    var context = canvas.getContext('2d');
    //context.addGrid(); 
    // the boxes
    context.strokeStyle = 'black';
    context.strokeRect (10, 50, 175, 125);
    context.strokeRect (475, 50, 300, 225);
    context.fillStyle = '#EEEEEE';
    context.fillRect (490,85,150,50)
    context.fillRect (510,200,225,50);
    // the arrows
    context.strokeStyle = 'green';
    context.beginPath();
      context.moveTo (177,100); context.lineTo (485,100);
      context.moveTo (480,95);  context.lineTo (485,100); context.lineTo (480,105);
      context.moveTo (520,115); context.lineTo (520,195);
      context.moveTo (515,190); context.lineTo (520,195); context.lineTo (525,190);
      context.stroke();    
    // the text
    context.textBaseline = 'middle';
    context.fillStyle = 'black';
    context.font = '18pt Arial';
    context.fillText ('HTML (and CSS)',10,25);
    context.fillText ('DOM / JavaScript', 530,25);
    context.fillStyle = 'blue';
    context.font = '10pt monospace';
    context.fillText ('...',25,75);
    context.fillText ('<canvas id="myCan">', 25,100);
    context.fillText ('</canvas">', 25,125);
    context.fillText ('...',25,150);    
    context.fillText ('HTMLCanvasElement', 500,100);    
    context.fillText ('CanvasRenderingContext2D',520,215);    
    context.fillText ("document.getElementById('myCan')",205,87);
    context.fillText ("getContext('2d')",530,167);   

DomOverview

    var context = document.getElementById('DomOverview').getContext('2d');
    //context.addGrid();    
    // the flow diagram
    context.strokeStyle = 'black';
    context.strokeRect (25, 50, 225, 325); // the HTML box
    context.strokeRect (500, 50, 225, 325); // the DOM box
    context.beginPath();  // the tree structure
      context.moveTo(525,85);
      context.lineTo(525,175);
      context.lineTo(540,175);
      context.moveTo(525,100);
      context.lineTo(540,100);
      context.moveTo(550,110);
      context.lineTo(550,150);
      context.moveTo(550,125);
      context.lineTo(565,125);
      context.moveTo(550,150);
      context.lineTo(565,150);
      context.moveTo(550,185);
      context.lineTo(550,300);
      context.lineTo(565,300);
      context.moveTo(550,200);
      context.lineTo(565,200);
      context.moveTo(550,225);
      context.lineTo(565,225);
      context.moveTo(550,250);
      context.lineTo(565,250);
      context.moveTo(550,275);
      context.lineTo(565,275);      
      context.stroke();    
    // the text
    context.textBaseline = 'middle';
    context.fillStyle = 'black';
    context.font = '18pt Arial';
    context.fillText ('HTML (and CSS)',45,25);
    context.fillText ('DOM / JavaScript', 530,25);
    context.fillStyle = 'blue';
    context.font = '10pt monospace';
    context.fillText ('<html>',50,75);
    context.fillText ('<head>',60,100);
    context.fillText ('...',70,125);
    context.fillText ('</head>',60,150);
    context.fillText ('<body>',60,175);
    context.fillText ('...',70,200);
    context.fillText ('<canvas id="Canvas1">',70,225);
    context.fillText ('...',70,250);
    context.fillText ('<canvas id="Canvas2">',70,275);
    context.fillText ('...',70,300);
    context.fillText ('</body>',60,325);    
    context.fillText ('</html>',50,350);
    context.fillText ('HTMLDocument', 525,75);
    context.fillText ('HTMLHeadElement', 550,100);
    context.fillText ('...',575,125);
    context.fillText ('...',575,150);
    context.fillText ('HTMLBodyElement', 550,175);
    context.fillText ('...',575,200);
    context.fillText ('HTMLCanvasElement',575,225);
    context.fillText ('...',575,250);
    context.fillText ('HTMLCanvasElement',575,275);
    context.fillText ('...',575,300);    
    // the arrows with text
    context.strokeStyle = 'green';
    context.beginPath();  // the green arrows
      // first arrow
        context.moveTo(110,75); context.lineTo(520,75);
        context.moveTo(515,70); context.lineTo(520,75); context.lineTo(515,80);
      // second arrow
        context.moveTo(245,225); context.lineTo(545,225);
        context.moveTo(540,220); context.lineTo(545,225); context.lineTo(540,230);
      // third arrow     
        context.moveTo(245,275); context.lineTo(545,275);
        context.moveTo(540,270); context.lineTo(545,275); context.lineTo(540,280);
      context.stroke();
    context.font = '8pt monospace';
    context.textAlign = 'center';
    context.fillText ("document",375,65) 
    context.fillText ("document.getElementById('Canvas1')",375,215);
    context.fillText ("document.getElementById('Canvas2')",375,265);   

GridExplained1

  var context = document.getElementById('GridExplained1').getContext('2d');
  //context.addGrid();
  // arrows
  context.lineWidth = 1.0;
  //context.lineCap = 'round';
  context.strokeStyle = 'blue';
  context.beginPath();
  context.moveTo (10,10);
  context.lineTo (310,10);
  context.lineTo (305,7);
  context.lineTo (305,13);
  context.lineTo (310,10);
  context.moveTo (10,10);
  context.lineTo (10,160);
  context.lineTo (7,155);
  context.lineTo (13,155);
  context.lineTo (10,160);
  context.stroke();
  // text
  context.fillStyle = 'black';
  context.font = '8px sans-serif';
  context.fillText ('0', 25,25);
  context.fillText ('150', 25, 165);
  context.fillText ('300', 300, 30);
  context.font = '20px sans-serif';
  context.fillText ('x',155,30);
  context.fillText ('y',30,90);  

GridExplained2

  var context = document.getElementById('GridExplained2').getContext('2d');
  //context.addGrid();
  context.fillStyle = 'red';
  context.beginPath();
  context.arc (200,25,4,0,2*Math.PI);
  context.fill();

GridExplained3

  var context = document.getElementById('GridExplained3').getContext('2d');
  context.addGrid();
  context.fillStyle = 'red';
  context.beginPath();
  context.arc (200,25,4,0,2*Math.PI);
  context.fill();

GridExplained4

  var context = document.getElementById('GridExplained4').getContext('2d');
  //context.addGrid();
  context.fillStyle = 'rgba(100%,0%,0%,0.5)';
  context.beginPath();
  context.arc (250,100,100,0,2*Math.PI);
  context.fill();

GermanFlag

        // get the canvas object and its context
        var canvas = document.getElementById('GermanFlag');
        var context = canvas.getContext('2d');
        // add the grid with 40 pixels for each step to the next line (see the appendix on this addGrid() method
        context.addGrid(40);            // THIS IS NOT A STANDARD METHOD!!!
        // now draw the colored rectangles
        context.fillStyle = '#000000';  // set the color to black ('#000000' is the same as 'black')
        context.fillRect(0, 0,200,40);  // draw a rectangle field with top left point at (0,0), 200 pixel wide and 40 pixel high
        context.fillStyle = '#FF0000';  // set the color to red (which is '#FF0000' is CSS hexadecimal color notation)
        context.fillRect(0,40,200,40);  // draw same size (200x40 pixel) red rectangle at (0,40)
        context.fillStyle = '#FFCC00';  // set the color to gold
        context.fillRect(0,80,200,40);  // golden rectangle with left top point at (0,80)

SizeReadingSample

  var canvas = document.getElementById('SizeReadingSample');
  var message = "This canvas is " + canvas.height + " pixel high and " + canvas.width + " pixel wide.";
  var context = canvas.getContext('2d');
  context.font = "20px Arial";
  context.fillText (message, 15, 70);

SizeChangingSample

  var canvas = document.getElementById('SizeChangingSample');
  canvas.width = 30;
  canvas.height = 30;

DataUrlSample

ReferenceSample1

  var context = document.getElementById('ReferenceSample1').getContext('2d');
  context.canvas.width = 250;        // reset the canvas width to 250
  context.canvas.height = 50;        // reset the canvas height to 50

StateSample

    var context = document.getElementById('StateSample').getContext('2d');
    context.addGrid();
    // Text style settings (these will be part of Start A, B, and C alike, because they do not change) 
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.lineWidth = 2.0;
    context.font = '25px Arial';    
    // Settings for State A 
    var verticalGrad = context.createLinearGradient (0,0,0,200);
    verticalGrad.addColorStop (0,'red');
    verticalGrad.addColorStop (1,'green');
    context.fillStyle = verticalGrad;                                      
    context.strokeStyle = 'yellow';
    // Draw Figure 1 
    context.fillRect (25,25,100,150);
    context.strokeText ("Fig 1",75,50);
    context.strokeText ("State A", 75,125);  
    // Save State A
    context.save();  
    // Settings for State B
    var radGrad = context.createRadialGradient (375,100,5, 375,100,200);
    radGrad.addColorStop (0,'orange');
    radGrad.addColorStop (1,'yellow');
    context.fillStyle = radGrad;
    context.strokeStyle = 'green';  
    // Draw Figure 2
    context.fillRect (175,25,100,150);
    context.strokeText ("Fig 2",225,50);  
    context.strokeText ("State B",225,125);  
    // Save State B
    context.save();  
    // Settings for State C
    context.fillStyle = '#888888';
    context.strokeStyle = '#EEEEEE';  
    // Draw Figure 3
    context.fillRect (325,25,100,150);
    context.strokeText ("Fig 3",375,50);  
    context.strokeText ("State C",375,125);  
    // Pop State C and restore State B
    context.restore();  
    // Draw Figure 4
    context.fillRect (475,25,100,150);
    context.strokeText ("Fig 4",525,50);  
    context.strokeText ("State B",525,125);  
    // Pop state B and restore state A
    context.restore();  
    // Draw Figure 5
    context.fillRect (625,25,100,150);
    context.strokeText ("Fig 5",675,50); 
    context.strokeText ("State A",675,125);  

ScalingGrid01

  var context = document.getElementById('ScalingGrid01').getContext('2d');
  // bottom text
  context.font = '12pt monospace';
  context.strokeStyle = 'black';
  context.textAlign = 'left';
  context.textBaseline = 'bottom';
  context.strokeText ('scale(x,y)', 25, 220);
  // the picture
  context.strokeStyle = 'black';
  context.font = '8pt sans-serif';
  context.strokeText ( '(0,0)', 10, 20);  
  context.translate (25,25);    
  context.strokeStyle = 'red';  
  context.strokeRect (0, 0, 125, 100);  
  context.strokeText ('x', 115, 11);
  context.strokeText ('y', 5, 93);  
  context.scale (0.8,1.5);   
  context.strokeStyle = 'blue';
  context.strokeRect (0, 0, 125, 100);  
  context.strokeText ('x', 115, 11);
  context.strokeText ('y', 5, 93);

RotationGrid01

  var context = document.getElementById('RotationGrid01').getContext('2d');
  // bottom text
  context.font = '12pt monospace';
  context.strokeStyle = 'black';
  context.textAlign = 'left';
  context.textBaseline = 'bottom';
  context.strokeText ('rotate(angle)', 25, 220);
  // the picture
  context.strokeStyle = 'black';
  context.font = '8pt sans-serif';
  context.strokeText ( '(0,0)', 60, 20);
  context.strokeText ( 'angle', 150, 50);
  context.beginPath();
  context.arc (75, 25, 75, 0, 0.5, false);
  context.stroke();
  context.translate (75,25);  
  context.strokeStyle = 'red';  
  context.strokeRect (0, 0, 125, 100);  
  context.strokeText ('x', 115, 11);
  context.strokeText ('y', 5, 93);
  context.rotate (0.5); 
  context.strokeStyle = 'blue';
  context.strokeRect (0, 0, 125, 100);  
  context.strokeText ('x', 115, 11);
  context.strokeText ('y', 5, 93);

TranslatingGrid01

  var context = document.getElementById('TranslatingGrid01').getContext('2d');
  // bottom text
  context.font = '12pt monospace';
  context.strokeStyle = 'black';
  context.textAlign = 'left';
  context.textBaseline = 'bottom';
  context.strokeText ('translate(x,y)', 25, 220);
  // the text
  context.strokeStyle = 'black';
  context.font = '8pt sans-serif';
  context.lineWidth = 1;
  context.strokeText ('(0,0)', 10, 20); 
  context.strokeText ('(x,y)', 85, 70); 
  // the blue rectangle with x and y
  context.translate (25,25);    
  context.strokeStyle = 'red';  
  context.strokeRect (0, 0, 125, 100);  
  context.strokeText ('x', 115, 11);
  context.strokeText ('y', 5, 93);  
  // the red rectangle with x and y
  context.translate (75, 50);   
  context.strokeStyle = 'blue';
  context.strokeRect (0, 0, 125, 100);  
  context.strokeText ('x', 115, 11);
  context.strokeText ('y', 5, 93);

ScalingGrid11

    var context = document.getElementById('ScalingGrid11').getContext('2d');
    context.addScaledGrid(1,1,40);

ScalingGrid12

    var context = document.getElementById('ScalingGrid12').getContext('2d');
    context.addScaledGrid(0.8,1.5,40);

ScalingGrid21

    var context = document.getElementById('ScalingGrid21').getContext('2d');
    context.strokeStyle = 'green';
    context.lineWidth = 5.0;
    context.beginPath();
    context.arc (100,100,80,0,2*Math.PI);
    context.stroke();

ScalingGrid22

    var context = document.getElementById('ScalingGrid22').getContext('2d');
    context.scale (0.8,1.5);
    context.strokeStyle = 'green';
    context.lineWidth = 5.0;
    context.beginPath();
    context.arc (100,100,80,0,2*Math.PI);
    context.stroke();

ScalingSample1

    var context = document.getElementById('ScalingSample1').getContext('2d');
    context.fillStyle = 'red';
    context.strokeStyle = 'black';
    context.font = '40px Arial';    
    // 1. draw a rectangle with text
    context.fillRect (50, 50, 150, 40);
    context.strokeText ('1. Hello', 55, 85);    
    // 2. scale and draw the same rectangle with text again
    context.scale (0.8, 2);                                       // shrink x by 0.8 and double y
    context.fillRect (50, 50, 150, 40);
    context.strokeText ('2. Hello', 55, 85);    
    // 3. scale once more, and make the same drawings
    context.scale (0.8, 2);                                       // shrink x by 0.8 and double y, again
    context.fillRect (50, 50, 150, 40);
    context.strokeText ('3. Hello', 55, 85);    

YMirror1

  var context = document.getElementById('YMirror1').getContext('2d');
  context.addScaledGrid (-1, 1);

YMirror2

    var context = document.getElementById('YMirror2').getContext('2d');
    context.scale (-1, 1);
    context.fillStyle = 'green';
    context.fillRect (-175, 70, 150, 60);
    context.fillStyle = 'yellow';
    context.fillRect (-170, 75, 140, 50);
    context.fillStyle = 'green';
    context.font = "40pt Arial";
    context.fillText("Hello", -160, 120);

XMirror1

  var context = document.getElementById('XMirror1').getContext('2d');
  context.addScaledGrid (1, -1);

RotationGrid1

  var context = document.getElementById('RotationGrid1').getContext('2d');
  context.strokeStyle = 'black';
  context.strokeText ( '(0,0)', 60, 20);
  context.strokeText ( 'angle', 150, 50);
  context.beginPath();
  context.arc (75, 25, 75, 0, 0.5, false);
  context.stroke();
  context.translate (75,25);  
  context.strokeStyle = 'red';  
  context.strokeRect (0, 0, 125, 100);  
  context.strokeText ('x', 115, 11);
  context.strokeText ('y', 5, 93);
  context.rotate (0.5); 
  context.strokeStyle = 'blue';
  context.strokeRect (0, 0, 125, 100);  
  context.strokeText ('x', 115, 11);
  context.strokeText ('y', 5, 93);

RotationGrid23

  var canvas = document.getElementById('RotationGrid23');
  var context = canvas.getContext('2d');  
  context.addRotatedGrid (15 * Math.PI / 180);

RotationGrid2

  var canvas = document.getElementById('RotationGrid2');
  var context = canvas.getContext('2d');  
  // set the parameters;
  var d = 50;
  var w = 300;
  var h = 150;
  // derive the indices
  var i;
  var j;  
  var i1 = 2 * Math.round (w / d);
  var i0 = - i1;
  var j1 = 2 * Math.round (h / d);
  var j0 = - j1;  
  // the grid lines
  context.strokeStyle = 'yellow';
  context.lineWidth = 1.0;
  context.beginPath();
  for (j = j0; j <= j1; j++) {
    context.moveTo (0, d * j);
    context.lineTo (w, d * j);
  };
  for (i = i0; i <= i1; i++) {
    context.moveTo (d * i, 0);
    context.lineTo (d * i, h);
  };
  context.stroke();
  // the text for the points  
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillStyle = 'black';
  context.font = '7pt sans-serif';
  for (i = i0; i <= i1; i++) {
    for (j = j0; j <= j1; j++) {
      context.fillText ( '(' + i * d + ',' + j * d + ')' , i * d, j * d );
    };
  };    

RotationGrid3

  var canvas = document.getElementById('RotationGrid3');
  var context = canvas.getContext('2d');
  // rotate
  context.rotate (15 * Math.PI / 180);  
  // set the parameters;
  var d = 50;
  var w = canvas.width;
  var h = canvas.height;
  // derive the indices
  var i;
  var j;  
  var i1 = 2 * Math.round (w / d);
  var i0 = - i1;
  var j1 = 2 * Math.round (h / d);
  var j0 = - j1;  
  // the grid lines
  context.strokeStyle = 'yellow';
  context.lineWidth = 1.0;
  context.beginPath();
  for (j = j0; j <= j1; j++) {
    context.moveTo (- 2 * w, d * j);
    context.lineTo (2 * w, d * j);
  };
  for (i = i0; i <= i1; i++) {
    context.moveTo (d * i, - 2 * h);
    context.lineTo (d * i,   2 * h);
  };
  context.stroke();  
  // the box
  context.strokeStyle = 'blue';
  context.lineWidth = 1.0;
  context.strokeRect (0,0,w,h);
  // the text for the points  
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillStyle = 'black';
  context.font = '7pt sans-serif';
  for (i = i0; i <= i1; i++) {
    for (j = j0; j <= j1; j++) {
      context.fillText ( '(' + i * d + ',' + j * d + ')' , i * d, j * d );
    };
  };

RotationSample1

    var context = document.getElementById('RotationSample1').getContext('2d');
    context.fillStyle = 'red';
    context.strokeStyle = 'black';
    context.font = '40px Arial';
    // 1. draw a rectangle with text
    context.fillRect (100, 5, 150, 40);
    context.strokeText ('1. Hello', 105, 40);
    // 2. declare a rotation and draw the same rectangle with text again
    context.rotate (30 * Math.PI / 180);                                      // first rotation of 30 degree 
    context.fillRect (100, 5, 150, 40);
    context.strokeText ('2. Hello', 105, 40);
    // 3. declare the same rotation, once more, and make the same drawings
    context.rotate (30 * Math.PI / 180);                                      // second rotation of 30 degree 
    context.fillRect (100, 5, 150, 40);
    context.strokeText ('3. Hello', 105, 40);

TranslationGrid2

  var context = document.getElementById('TranslationGrid2').getContext('2d');
  context.addStandardGrid(50);

TranslationGrid3

  var context = document.getElementById('TranslationGrid3').getContext('2d');
  context.addTranslatedGrid (100,-50,50);

TranslationGrid4

  var context = document.getElementById('TranslationGrid4').getContext('2d');
  context.strokeStyle = 'red';
  context.strokeRect (25, 25, 250, 150); 
  context.strokeStyle = 'black'; 
  context.textAlign = 'center';  
  context.strokeText ('x=0', 25, 15);
  context.strokeText ('50', 75, 15);
  context.strokeText ('100', 125, 15);
  context.strokeText ('150', 175, 15);
  context.strokeText ('200', 225, 15);
  context.strokeText ('250', 275, 15);  
  context.textAlign = 'right';
  context.textBaseline = 'middle';
  context.strokeText ('y=0', 20, 25);
  context.strokeText ('50', 20, 75);
  context.strokeText ('100', 20, 125);
  context.strokeText ('150', 20, 175);  

TranslationGrid5

  var context = document.getElementById('TranslationGrid5').getContext('2d');
  context.strokeStyle = 'red';
  context.strokeRect (25, 25, 250, 150); 
  context.strokeStyle = 'black'; 
  context.textAlign = 'center';  
  context.strokeText ('-100', 25, 15);
  context.strokeText ('-50', 75, 15);
  context.strokeText ('0', 125, 15);
  context.strokeText ('50', 175, 15);
  context.strokeText ('100', 225, 15);
  context.strokeText ('150', 275, 15);  
  context.textAlign = 'right';
  context.textBaseline = 'middle';
  context.strokeText ('50', 20, 25);
  context.strokeText ('100', 20, 75);
  context.strokeText ('150', 20, 125);
  context.strokeText ('200', 20, 175);  

TranslationSample1

    var context = document.getElementById('TranslationSample1').getContext('2d');
    context.fillStyle = 'red';
    context.strokeStyle = 'black';
    context.font = '40px Arial';
    // 1. draw the first red rectangle with text  
    context.fillRect (0,5,150,40);  
    context.strokeText ('1. Hello', 5, 40);
    // 2. declare a translation and draw the same rectangle, again
    context.translate(125,50);                                                 // first call of translate(125,50)
    context.fillRect (0,5,150,40);
    context.strokeText ('2. Hello', 5, 40);
    // 3. declare the same translation, once more, and make the same drawings
    context.translate(125,50);                                                 // second call of translate(125,50)
    context.fillRect (0,5,150,40);
    context.strokeText ('3.Hello', 5, 40);  

TransformGrid0

    var context = document.getElementById('TransformGrid0').getContext('2d');
    context.addTransGrid (1, 0, 0, 1, 0, 0,   30, 'blue', 'red', '8pt sans-serif');

TransformGrid1

    var context = document.getElementById('TransformGrid1').getContext('2d');
    context.addTransGrid (0.5, 0.4, -0.2, 1.2, 200, 0,   30, 'blue', 'red', '8pt sans-serif');

TransformationSample1

    var context = document.getElementById('TransformationSample1').getContext('2d');
    // prepare the settings for color and font styles
    context.fillStyle = 'red';
    context.strokeStyle = 'black';
    context.font = '40px Arial';
    // 1. draw the first red rectangle with text  
    context.fillRect (0, 5, 150, 40);  
    context.strokeText ('1. Hello', 5, 40);
    // 2. declare the translation and draw the same rectangle, again
    context.transform (0.5, 0.4, -0.2, 1.2, 200, 0);
    context.fillRect (0, 5, 150, 40);
    context.strokeText ('2. Hello', 5, 40);

ShearTransform1

    var context = document.getElementById('ShearTransform1').getContext('2d');
    context.addShearedGrid(0.5,0);

ShearTransform2

    var context = document.getElementById('ShearTransform2').getContext('2d');
    context.addShearedGrid(0,0.2);

ShearTransform3

    var context = document.getElementById('ShearTransform3').getContext('2d');
    context.addShearedGrid(0.5,0.2);

RotatedHallo1

    var context = document.getElementById('RotatedHallo1').getContext('2d');
    // Transformation: 1. rotate, 2. translate
    context.rotate (1.5*Math.PI);  // rotation of 270 degree
    context.translate (-255,0);
    // draw the "HELLO" box
    context.fillStyle = 'red';
    context.fillRect (0, 0, 255, 120);
    context.fillStyle = 'yellow';
    context.fillRect (5, 5, 245, 110);
    context.fillStyle = 'red';
    context.font = "50pt Arial";
    context.lineWidth = 5.0;
    context.fillText ("HELLO!", 10, 85);

TurnLeftGrid1

    var context = document.getElementById('TurnLeftGrid1').getContext('2d');
    context.addStandardGrid();

TurnLeftGrid2

    var context = document.getElementById('TurnLeftGrid2').getContext('2d');
    context.addTransGrid (0,-1,1,0,0,150);

TurnLeftGrid3

    var context = document.getElementById('TurnLeftGrid3').getContext('2d');
    context.addRotatedGrid (1.5*Math.PI);

TurnLeftGrid4

    var context = document.getElementById('TurnLeftGrid4').getContext('2d');
    context.addTransGrid (0,-1,1,0,0,150);

RotatedHallo2

    var context = document.getElementById('RotatedHallo2').getContext('2d');
    context.addTransGrid (0,-1,1,0,0,255);

RotatedHallo3

    var context = document.getElementById('RotatedHallo3').getContext('2d');
    // Transformation: 1. rotate, 2. translate
    context.rotate (1.5*Math.PI);
    context.translate (-255,0);
    // draw the "HELLO" box
    context.fillStyle = 'red';
    context.fillRect (0, 0, 255, 120);
    context.fillStyle = 'yellow';
    context.fillRect (5, 5, 245, 110);
    context.fillStyle = 'red';
    context.font = "50pt Arial";
    context.lineWidth = 5.0;
    context.fillText ("HELLO!", 10, 85);

RotatedHalloImage1

    var context = document.getElementById('RotatedHalloImage1').getContext('2d');
    // 1. The vertical text box 
    // 1.a) Two transformations: first a rotation, then a translation
    context.rotate (1.5 * Math.PI);
    context.translate (-255,0);
    // 1.b) The code for the text box
    context.fillStyle = 'red';
    context.fillRect (0, 0, 255, 120);
    context.fillStyle = 'yellow';
    context.fillRect (5, 5, 245, 110);
    context.fillStyle = 'red';
    context.font = "50pt Arial";
    context.lineWidth = 5.0;
    context.fillText ("HELLO!", 10, 85);    
    // Reset the current transformation
    context.setTransform (1,0,0,1,0,0);    
    // 2. The mirror image of the horse
    // 2.a) Two transformations: first mirror at the y-axis, then a translation
    context.scale (-1, 1);
    context.translate (-300,0);
    // 2.b) Insert the image
    var image = new Image();
    image.src = "horse.jpg";
    context.drawImage (image, 0, 0, 180, 255);

ImageSample123

    var context = document.getElementById('ImageSample123').getContext('2d');
    var image = new Image();
    image.src = "horse.jpg";
    context.drawImage (image, 0, 0, 180, 255);

ScalingImage2

    var context = document.getElementById('ScalingImage2').getContext('2d');
    context.addTransGrid (-1,0,0,1,300,0);  // should be (-1,0,0,1,-300,0) as the result of the composition.

ScalingImage3

    var context = document.getElementById('ScalingImage3').getContext('2d');
    context.scale (-1, 1);
    context.translate(-300,0);
    //context.transform(-1,0,0,1,300,0);
    var image = new Image();
    image.src = "horse.jpg";
    context.drawImage (image, 0, 0, 180, 255);

RotatedHalloImage1Again

    var context = document.getElementById('RotatedHalloImage1Again').getContext('2d');
    context.drawImage (document.getElementById ('RotatedHalloImage1'), 0, 0);

RotatedHalloImage2

    var context = document.getElementById('RotatedHalloImage2').getContext('2d');
    // 1. The vertical text box 
    // 1.a) Two transformations: first a rotation, then a translation
    context.rotate (1.5 * Math.PI);
    context.translate (-255,0);
    // 1.b) The code for the text box
    context.fillStyle = 'red';
    context.fillRect (0, 0, 255, 120);
    context.fillStyle = 'yellow';
    context.fillRect (5, 5, 245, 110);
    context.fillStyle = 'red';
    context.font = "50pt Arial";
    context.lineWidth = 5.0;
    context.fillText ("HELLO!", 10, 85);    
    // 2. The mirror image of the horse
    // 2.a) Two transformations: first mirror at the y-axis, then a translation
    context.scale (-1, 1);
    context.translate (-300,0);
    // 2.b) Insert the image
    var image = new Image();
    image.src = "horse.jpg";
    context.drawImage (image, 0, 0, 180, 255);

GlobalAlphaSample1

  var context = document.getElementById('GlobalAlphaSample1').getContext('2d');
  context.globalAlpha = 1.0;
  context.font = '20px Arial'; context.strokeStyle = 'black';  // settings for the text style
  context.fillStyle = 'red';     context.fillRect( 10,10,150,100);  context.strokeText('red',    20, 50);
  context.fillStyle = 'green';   context.fillRect(110,30,150,100);  context.strokeText('green', 120, 80);
  context.fillStyle = 'yellow';  context.fillRect(210,50,150,100);  context.strokeText('yellow',220,110);
  context.fillStyle = 'blue';    context.fillRect(310,70,150,100);  context.strokeText('blue',  320,140);

GlobalAlphaSample2

  var context = document.getElementById('GlobalAlphaSample2').getContext('2d');
  context.globalAlpha = 0.5;
  context.font = '20px Arial'; context.strokeStyle = 'black';  // settings for the text style
  context.fillStyle = 'red';     context.fillRect( 10,10,150,100);  context.strokeText('red',    20, 50);
  context.fillStyle = 'green';   context.fillRect(110,30,150,100);  context.strokeText('green', 120, 80);
  context.fillStyle = 'yellow';  context.fillRect(210,50,150,100);  context.strokeText('yellow',220,110);
  context.fillStyle = 'blue';    context.fillRect(310,70,150,100);  context.strokeText('blue',  320,140);

GlobalAlphaSample3

  var context = document.getElementById('GlobalAlphaSample3').getContext('2d');
  context.globalAlpha = 0.1; 
  context.font = '20px Arial'; context.strokeStyle = 'black';  // settings for the text style
  context.fillStyle = 'red';     context.fillRect( 10,10,150,100);  context.strokeText('red',    20, 50);
  context.fillStyle = 'green';   context.fillRect(110,30,150,100);  context.strokeText('green', 120, 80);
  context.fillStyle = 'yellow';  context.fillRect(210,50,150,100);  context.strokeText('yellow',220,110);
  context.fillStyle = 'blue';    context.fillRect(310,70,150,100);  context.strokeText('blue',  320,140);

GlobalCompositeSample

  var context = document.getElementById('GlobalCompositeSample').getContext('2d');
  // 1. add the orange square
  context.fillStyle = 'orange';
  context.fillRect (0, 0, 60, 60);
  // 2. set the globalCompositeOperation
  context.globalCompositeOperation = "source-over";
  // 3. add the cyan circle
  context.fillStyle = 'cyan';
  context.arc(54,54,36,0,2*Math.PI,false);
  context.fill();

SourceOverSample

        var context = document.getElementById('SourceOverSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "source-over"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

SourceAtopSample

        var context = document.getElementById('SourceAtopSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "source-atop"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

SourceInSample

        var context = document.getElementById('SourceInSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "source-in"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

SourceOutSample

        var context = document.getElementById('SourceOutSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "source-out"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

DestinationOverSample

        var context = document.getElementById('DestinationOverSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "destination-over"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

DestinationAtopSample

        var context = document.getElementById('DestinationAtopSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "destination-atop"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

DestinationInSample

        var context = document.getElementById('DestinationInSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "destination-in"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

DestinationOutSample

        var context = document.getElementById('DestinationOutSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "destination-out"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

LighterSample

        var context = document.getElementById('LighterSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "lighter"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

CopySample

        var context = document.getElementById('CopySample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "copy"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

XorSample

        var context = document.getElementById('XorSample').getContext('2d');
        context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60);
        context.globalCompositeOperation = "xor"; 
        context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill();

StrokeStyleSample1

  var context = document.getElementById('StrokeStyleSample1').getContext('2d');
  // 1. set strokeStyle to a hexadecimal color value, namely '#008000' (same as 'green')
  context.strokeStyle = '#008000'; 
  // 2. draw a kind of half cirlce on the left            
  context.beginPath();
  context.moveTo (60, 10);
  context.lineTo (60, 110);
  context.bezierCurveTo (0, 110, 0, 10, 60, 10);
  context.stroke();
  context.closePath();
  // 3. draw a rectangle on the right top
  context.strokeRect (80, 10, 230, 30);
  // 4. set the text font and write 'Hello!' on the right bottom of the canvas
  context.font = '60pt sans-serif';
  context.strokeText ('Hello!', 80, 110);  

FillStyleSample1

  var context = document.getElementById('FillStyleSample1').getContext('2d');
  // 1. set strokeStyle to a hexadecimal color value, namely '#008000' (same as 'green')
  context.fillStyle = '#008000'; 
  // 2. draw a kind of half cirlce on the left            
  context.beginPath();
  context.moveTo (60, 10);
  context.lineTo (60, 110);
  context.bezierCurveTo (0, 110, 0, 10, 60, 10);
  context.fill();
  context.closePath();
  // 3. draw a rectangle on the right top
  context.fillRect (80, 10, 230, 30);
  // 4. set the text font and write 'Hello!' on the right bottom of the canvas
  context.font = '60pt sans-serif';
  context.fillText ('Hello!', 80, 110);  

Rainbow1

  var context = document.getElementById('Rainbow1').getContext('2d');
  var rainbowGradient = context.createLinearGradient (100, 50, 500, 50);
  rainbowGradient.addColorStop (0,    'red');
  rainbowGradient.addColorStop (0.25, 'yellow');
  rainbowGradient.addColorStop (0.5,  'green');
  rainbowGradient.addColorStop (0.75, 'blue');
  rainbowGradient.addColorStop (1,    'violet');
  context.fillStyle = rainbowGradient;
  context.fillRect (0, 0, 600, 100);

Rainbow2

      var context = document.getElementById('Rainbow2').getContext('2d');
      context.addGrid(50);
      context.strokeStyle = 'black';
      context.lineWidth = 2.0;
      context.textAlign = 'center';   
      context.beginPath();
      context.moveTo (100, 50);
      context.lineTo (500, 50);
      context.arc (100, 50, 3.5, 0, 2*Math.PI, false);  
      context.arc (500, 50, 3.5, 0, 2*Math.PI, false);    
      context.stroke();
      context.closePath();
      context.lineWidth = 0.6;
      context.font = '14pt sans-serif';  
      context.fillText ('createLinearGradient (100, 50, 500, 50)', 300, 30);

Rainbow3

      var context = document.getElementById('Rainbow3').getContext('2d');
      context.addGrid(50);
      context.strokeStyle = 'black';
      context.lineWidth = 2.0;
      context.textAlign = 'center';
      context.beginPath();
      context.moveTo (100, 50);
      context.lineTo (500, 50);
      context.stroke();
      context.closePath();
      context.beginPath();
        context.fillStyle = 'red'; context.arc (100, 50, 3.5, 0, 2*Math.PI, false); 
        context.fill(); 
        context.closePath();
      context.beginPath();
        context.fillStyle = 'yellow'; context.arc (200, 50, 3.5, 0, 2*Math.PI, false);  
        context.fill(); 
        context.closePath();
      context.beginPath();
        context.fillStyle = 'green'; context.arc (300, 50, 3.5, 0, 2*Math.PI, false);  
        context.fill(); 
        context.closePath();
      context.beginPath();
        context.fill(); 
        context.closePath();
      context.beginPath();
        context.fillStyle = 'blue'; context.arc (400, 50, 3.5, 0, 2*Math.PI, false);  
        context.fill(); 
        context.closePath();
      context.beginPath();
        context.fillStyle = 'violet'; context.arc (500, 50, 3.5, 0, 2*Math.PI, false);  
        context.fill();
        context.closePath();   
      context.fillStyle = 'black';
      context.lineWidth = 0.6;
      context.font = '14pt sans-serif';  
      context.fillText ('addColorStop', 300, 30);
      context.font = '8pt sans-serif';
      context.fillText ('0',    100, 70);
      context.fillText ('0.25', 200, 70);
      context.fillText ('0.5',  300, 70);
      context.fillText ('0.75', 400, 70);
      context.fillText ('1',    500, 70); 
      context.fillText ("'red'",    100, 90);
      context.fillText ("'yellow'", 200, 90);
      context.fillText ("'green'",  300, 90);
      context.fillText ("'blue'",   400, 90);
      context.fillText ("'violet'", 500, 90);

RainbowStrokeStyleSample1

  var context = document.getElementById('RainbowStrokeStyleSample1').getContext('2d');
  // 1. set strokeStyle to a linear gradient value
  var rainbowGradient = context.createLinearGradient (0, 60, 320, 60);
  rainbowGradient.addColorStop (0,    'red');
  rainbowGradient.addColorStop (0.25, 'yellow');
  rainbowGradient.addColorStop (0.5,  'green');
  rainbowGradient.addColorStop (0.75, 'blue');
  rainbowGradient.addColorStop (1,    'violet');
  context.strokeStyle = rainbowGradient;
  // 2. draw a kind of half cirlce on the left            
  context.beginPath();
  context.moveTo (60, 10);
  context.lineTo (60, 110);
  context.bezierCurveTo (0, 110, 0, 10, 60, 10);
  context.stroke();
  context.closePath();
  // 3. draw a rectangle on the right top
  context.strokeRect (80, 10, 230, 30);
  // 4. set the text font and write 'Hello!' on the right bottom of the canvas
  context.font = '60pt sans-serif';
  context.strokeText ('Hello!', 80, 110);  

RadialSample

  var context = document.getElementById('RadialSample').getContext('2d');
  // 1. create a radial gradient
  var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110);
  // 2. add colors
  rg.addColorStop (0, 'yellow');
  rg.addColorStop (1, 'red');
  // 3. set the fill style to the new gradient
  context.fillStyle = rg;
  // 4. now draw some filled objects; in this case just a circle
  context.beginPath();
  context.arc (120,120,110,0,2*Math.PI,false);
  context.fill();
  context.closePath();

RadialSample1

      var context = document.getElementById('RadialSample1').getContext('2d');
      context.addGrid(20);
      context.strokeStyle = 'black';
      context.lineWidth = 2.0;
      context.beginPath();
        context.arc (80,80,20,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
      context.beginPath();
        context.arc (120,120,110,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
      context.textAlign = 'center';
      context.fillText ('start', 80, 110);
      context.fillText ('end', 205, 210);

RadialSample2

      var context = document.getElementById('RadialSample2').getContext('2d');
      context.addGrid(20);
      context.strokeStyle = 'black';
      context.lineWidth = 2.0;
      context.beginPath();
        context.arc (80,80,20,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
      context.beginPath();
        context.arc (90,90,42.5,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
      context.beginPath();
        context.arc (100,100,65,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
      context.beginPath();
        context.arc (110,110,87.5,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
      context.beginPath();
        context.arc (120,120,110,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
      context.fillText ('0.0',   90, 110);
      context.fillText ('0.25', 125, 130);
      context.fillText ('0.5',  160, 150);
      context.fillText ('0.75', 185, 170);
      context.fillText ('1.0',  220, 190);

RadialSample3

      var context = document.getElementById('RadialSample3').getContext('2d');
      context.addGrid(20);
      context.strokeStyle = 'black';
      context.lineWidth = 5.0;
      context.strokeStyle = 'yellow';
      context.beginPath();
        context.arc (80,80,20,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
      context.strokeStyle = 'red';
      context.beginPath();
        context.arc (120,120,110,0,2*Math.PI,false);
        context.stroke();
        context.closePath();

RadialSample4

      var context = document.getElementById('RadialSample4').getContext('2d');
      context.addGrid(20);
      // 1. create a radial gradient
      var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110);
      // 2. add colors
      rg.addColorStop (0, 'yellow');
      rg.addColorStop (1, 'red');
      // 3. set the fill style to the new gradient
      context.fillStyle = rg;
      context.beginPath();
      context.arc (120,120,110,0,2*Math.PI,false);
      context.fill();
      context.closePath();

RadialSample8

  var context = document.getElementById('RadialSample8').getContext('2d');
  // 1. create a radial gradient
  var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110);
  // 2. add colors
  rg.addColorStop (0, 'yellow');
  rg.addColorStop (1, 'red');
  // 3. set the fill style to the new gradient
  context.fillStyle = rg;
  // 4. now draw some filled objects; 
  context.fillRect (0, 0, 240, 240);

RadialSample9

  var context = document.getElementById('RadialSample9').getContext('2d');
  // 1. create a radial gradient
  var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110);
  // 2. add colors
  rg.addColorStop (0, 'white');
  rg.addColorStop (1, 'black');
  // 3. set the fill style to the new gradient
  context.fillStyle = rg;
  // 4. now draw some filled objects; 
  context.fillRect (0, 0, 240, 240);

RadialSample7

  var context = document.getElementById('RadialSample7').getContext('2d');
  // 1. create a radial gradient
  var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110);
  // 2. add colors
  rg.addColorStop (0, 'red');
  rg.addColorStop (0.25, 'yellow');
  rg.addColorStop (0.5, 'green');
  rg.addColorStop (0.75, 'blue');
  rg.addColorStop (1, 'violet');
  // 3. set the fill style to the new gradient
  context.fillStyle = rg;
  // 4. now draw some filled objects; 
  context.fillRect (0, 0, 240, 240);

RadialGradient1

        var context = document.getElementById('RadialGradient1').getContext('2d');
        context.addGrid();
        var rainbowGradient = context.createRadialGradient (100, 100, 10, 100, 100, 75);
        rainbowGradient.addColorStop (0, 'orange');
        rainbowGradient.addColorStop (1, 'cyan');
        context.fillStyle = rainbowGradient;
        context.fillRect (0, 0, 200, 200);

RadialGradient2

        var context = document.getElementById('RadialGradient2').getContext('2d');
        context.addGrid();
        var rainbowGradient = context.createRadialGradient (80, 80, 10, 120, 120, 75);
        rainbowGradient.addColorStop (0, 'orange');
        rainbowGradient.addColorStop (1, 'cyan');
        context.fillStyle = rainbowGradient;
        context.fillRect (0, 0, 200, 200);

RadialGradient3

        var context = document.getElementById('RadialGradient3').getContext('2d');
        context.addGrid();
        var rainbowGradient = context.createRadialGradient (50, 50, 50, 150, 150, 50);
        rainbowGradient.addColorStop (0, 'orange');
        rainbowGradient.addColorStop (1, 'cyan');
        context.fillStyle = rainbowGradient;
        context.fillRect (0, 0, 200, 200);

RadialGradient4

        var context = document.getElementById('RadialGradient4').getContext('2d');
        context.addGrid();
        var rainbowGradient = context.createRadialGradient (30, 30, 10, 150, 150, 50);
        rainbowGradient.addColorStop (0, 'orange');
        rainbowGradient.addColorStop (1, 'cyan');
        context.fillStyle = rainbowGradient;
        context.fillRect (0, 0, 200, 200);

RadialGradientCircles1

        var context = document.getElementById('RadialGradientCircles1').getContext('2d');
        context.addGrid();
        context.lineWidth = 5.0;
        // orange circle
          context.strokeStyle = 'orange';
          context.beginPath();
          context.arc (100, 100, 10, 0, 2 * Math.PI, false);
          context.stroke();  
          context.closePath();
        // cyan circle
          context.strokeStyle = 'cyan';
          context.beginPath();
          context.arc (100, 100, 75, 0, 2 * Math.PI, false);
          context.stroke();  

RadialGradientCircles2

        var context = document.getElementById('RadialGradientCircles2').getContext('2d');
        context.addGrid();
        context.lineWidth = 5.0;
        // orange circle
          context.strokeStyle = 'orange';
          context.beginPath();
          context.arc (80, 80, 10, 10, 0, 2 * Math.PI, false);
          context.stroke();  
          context.closePath();
        // cyan circle
          context.strokeStyle = 'cyan';
          context.beginPath();
          context.arc (120, 120, 75, 0, 2 * Math.PI, false);
          context.stroke();  

RadialGradientCircles3

        var context = document.getElementById('RadialGradientCircles3').getContext('2d');
        context.addGrid();
        context.lineWidth = 5.0;
        // orange circle
          context.strokeStyle = 'orange';
          context.beginPath();
          context.arc (50, 50, 50, 0, 2 * Math.PI, false);
          context.stroke();  
          context.closePath();
        // cyan circle
          context.strokeStyle = 'cyan';
          context.beginPath();
          context.arc (150, 150, 50, 0, 2 * Math.PI, false);
          context.stroke();  

RadialGradientCircles4

        var context = document.getElementById('RadialGradientCircles4').getContext('2d');
        context.addGrid();
        context.lineWidth = 5.0;
        // orange circle
          context.strokeStyle = 'orange';
          context.beginPath();
          context.arc (30, 30, 10, 10, 0, 2 * Math.PI, false);
          context.stroke();  
          context.closePath();
        // cyan circle
          context.strokeStyle = 'cyan';
          context.beginPath();
          context.arc (150, 150, 50, 0, 2 * Math.PI, false);
          context.stroke();  

CreatePatternSample1

  var context = document.getElementById('CreatePatternSample1').getContext('2d');
  // create an Image object from the grayhorse.jpg file
  var horseImage = new Image ();
  horseImage.src = 'grayhorse.jpg';
  // create a CanvasPattern object with this image and make that the new fillStyle value
  var horsePattern = context.createPattern (horseImage, 'repeat');
  context.fillStyle = horsePattern;
  // Now draw same objects: first a rectangle
  context.fillRect (0, 0, 200, 210);
  // then a triangle
  context.beginPath();
  context.moveTo (220, 0);
  context.lineTo (220, 100);
  context.lineTo (550, 50);
  context.lineTo (220, 0);
  context.fill();
  context.closePath();
  // and finally write "Hello!" 
  context.font = '120px sans-serif';
  context.fillText ('Hello!', 210, 200);

LineWidthSample1

  var context = document.getElementById('LineWidthSample1').getContext('2d');
  //context.addGrid(20);
  context.strokeStyle = 'black';
  context.textAlign = 'center';  
  context.lineWidth = 0.1;
  context.beginPath(); context.moveTo (20, 25); context.lineTo (20, 100); context.stroke();
  context.fillText ('0.1', 20, 125);   
  context.lineWidth = 0.2;
  context.beginPath(); context.moveTo (60, 25); context.lineTo (60, 100); context.stroke();
  context.fillText ('0.2', 60, 125);   
  context.lineWidth = 0.3;
  context.beginPath(); context.moveTo (100, 25); context.lineTo (100, 100); context.stroke();
  context.fillText ('0.3', 100, 125);   
  context.lineWidth = 0.4;
  context.beginPath(); context.moveTo (140, 25); context.lineTo (140, 100); context.stroke();
  context.fillText ('0.4', 140, 125);  
  context.lineWidth = 0.5;
  context.beginPath(); context.moveTo (180, 25); context.lineTo (180, 100); context.stroke();
  context.fillText ('0.5', 180, 125);  
  context.lineWidth = 0.6;
  context.beginPath(); context.moveTo (220, 25); context.lineTo (220, 100); context.stroke();
  context.fillText ('0.6', 220, 125);  
  context.lineWidth = 0.7;
  context.beginPath(); context.moveTo (260, 25); context.lineTo (260, 100); context.stroke();
  context.fillText ('0.7', 260, 125);  
  context.lineWidth = 0.8;
  context.beginPath(); context.moveTo (300, 25); context.lineTo (300, 100); context.stroke();
  context.fillText ('0.8', 300, 125);  
  context.lineWidth = 0.9;
  context.beginPath(); context.moveTo (340, 25); context.lineTo (340, 100); context.stroke();
  context.fillText ('0.9', 340, 125);  
  context.lineWidth = 1.0;
  context.beginPath(); context.moveTo (380, 25); context.lineTo (380, 100); context.stroke();
  context.fillText ('1.0', 380, 125);  
  context.lineWidth = 1.5;
  context.beginPath(); context.moveTo (420, 25); context.lineTo (420, 100); context.stroke();
  context.fillText ('1.5', 420, 125);   
  context.lineWidth = 2.0;
  context.beginPath(); context.moveTo (460, 25); context.lineTo (460, 100); context.stroke();
  context.fillText ('2.0', 460, 125);   
  context.lineWidth = 3.0;
  context.beginPath(); context.moveTo (500, 25); context.lineTo (500, 100); context.stroke();
  context.fillText ('3.0', 500, 125);  
  context.lineWidth = 4.0;
  context.beginPath(); context.moveTo (540, 25); context.lineTo (540, 100); context.stroke();
  context.fillText ('4.0', 540, 125);
  context.lineWidth = 5.0;
  context.beginPath(); context.moveTo (580, 25); context.lineTo (580, 100); context.stroke();
  context.fillText ('5.0', 580, 125);  
  context.lineWidth = 10.0;
  context.beginPath(); context.moveTo (620, 25); context.lineTo (620, 100); context.stroke();
  context.fillText ('10.0', 620, 125);  
  context.lineWidth = 20.0;
  context.beginPath(); context.moveTo (660, 25); context.lineTo (660, 100); context.stroke();
  context.fillText ('20.0', 660, 125);  

LineWidthCanvas1

  var context = document.getElementById('LineWidthCanvas1').getContext('2d');
  //context.addGrid(20);
  context.fillStyle = 'blue';
  context.strokeStyle = 'blue';
  context.textAlign = 'right';
  context.textBaseline = 'middle';
  context.fillText ('0', 15, 20);
  context.fillText ('1', 15, 40);
  context.fillText ('2', 15, 60);
  context.fillText ('3', 15, 80);
  context.fillText ('4', 15,100);
  context.textAlign = 'center';
  context.fillText ( '0', 20, 15);
  context.fillText ( '1', 40, 15);
  context.fillText ( '2', 60, 15);
  context.fillText ( '3', 80, 15);
  context.fillText ( '4',100, 15);
  context.fillText ( '5',120, 15);
  context.fillText ( '6',140, 15);
  context.fillText ( '7',160, 15);
  context.fillText ( '8',180, 15);
  context.fillText ( '9',200, 15);
  context.fillText ('10',220, 15);
  context.beginPath ();
  context.moveTo ( 19, 20);
  context.lineTo (220, 20);
  context.moveTo ( 19, 40);
  context.lineTo (220, 40);
  context.moveTo ( 19, 60);
  context.lineTo (220, 60);
  context.moveTo ( 19, 80);
  context.lineTo (220, 80);
  context.moveTo ( 19,100);
  context.lineTo (220,100);
  context.moveTo ( 20, 19);
  context.lineTo ( 20,100);
  context.moveTo ( 40, 19);
  context.lineTo ( 40,100);
  context.moveTo ( 60, 19);
  context.lineTo ( 60,100);
  context.moveTo ( 80, 19);
  context.lineTo ( 80,100);
  context.moveTo (100, 19);
  context.lineTo (100,100);
  context.moveTo (120, 19);
  context.lineTo (120,100);
  context.moveTo (140, 19);
  context.lineTo (140,100);
  context.moveTo (160, 19);
  context.lineTo (160,100);
  context.moveTo (180, 19);
  context.lineTo (180,100);
  context.moveTo (200, 19);
  context.lineTo (200,100);
  context.moveTo (220, 19);
  context.lineTo (220,100);
  context.stroke();
  context.closePath ();  
  // red line with two bullets at the end  
  context.strokeStyle = 'red';
  context.beginPath();
  context.arc (20,60,2,0,2*Math.PI);
  context.arc (220,60,2,0,2*Math.PI);
  context.moveTo (20,60);
  context.lineTo (220, 60);
  context.stroke();
  context.closePath();
  // black and gray "line" with text underneath
  context.fillStyle = 'rgba(110,110,110,0.6)';  //'#DDDDDD';
  context.fillRect (20, 40, 200, 40);  
  context.fillStyle = 'rgba(0,0,0,0.6)';
  context.fillRect (20, 50, 200, 20);  
  context.fillStyle = 'black';
  context.fillText ('black line of width 1.0 from (0,2) to (10,2)', 125, 120);        

LineWidthCanvas2

  var context = document.getElementById('LineWidthCanvas2').getContext('2d');
  //context.addGrid(20);
  context.fillStyle = 'blue';
  context.strokeStyle = 'blue';
  context.textAlign = 'right';
  context.textBaseline = 'middle';
  context.fillText ('0', 15, 20);
  context.fillText ('1', 15, 40);
  context.fillText ('2', 15, 60);
  context.fillText ('3', 15, 80);
  context.fillText ('4', 15,100);
  context.textAlign = 'center';
  context.fillText ( '0', 20, 15);
  context.fillText ( '1', 40, 15);
  context.fillText ( '2', 60, 15);
  context.fillText ( '3', 80, 15);
  context.fillText ( '4',100, 15);
  context.fillText ( '5',120, 15);
  context.fillText ( '6',140, 15);
  context.fillText ( '7',160, 15);
  context.fillText ( '8',180, 15);
  context.fillText ( '9',200, 15);
  context.fillText ('10',220, 15);
  context.beginPath ();
  context.moveTo ( 19, 20);
  context.lineTo (220, 20);
  context.moveTo ( 19, 40);
  context.lineTo (220, 40);
  context.moveTo ( 19, 60);
  context.lineTo (220, 60);
  context.moveTo ( 19, 80);
  context.lineTo (220, 80);
  context.moveTo ( 19,100);
  context.lineTo (220,100);
  context.moveTo ( 20, 19);
  context.lineTo ( 20,100);
  context.moveTo ( 40, 19);
  context.lineTo ( 40,100);
  context.moveTo ( 60, 19);
  context.lineTo ( 60,100);
  context.moveTo ( 80, 19);
  context.lineTo ( 80,100);
  context.moveTo (100, 19);
  context.lineTo (100,100);
  context.moveTo (120, 19);
  context.lineTo (120,100);
  context.moveTo (140, 19);
  context.lineTo (140,100);
  context.moveTo (160, 19);
  context.lineTo (160,100);
  context.moveTo (180, 19);
  context.lineTo (180,100);
  context.moveTo (200, 19);
  context.lineTo (200,100);
  context.moveTo (220, 19);
  context.lineTo (220,100);
  context.stroke();
  context.closePath ();
  // red line with two bullets at the end  
  context.strokeStyle = 'red';
  context.beginPath();
  context.arc (20,50,2,0,2*Math.PI);
  context.arc (220,50,2,0,2*Math.PI);
  context.moveTo (20,50);
  context.lineTo (220, 50);
  context.stroke();
  context.closePath();
  // black and gray "line" with text underneath  
  context.fillStyle = 'rgba(0,0,0,0.6)';
  context.fillRect (20, 40, 200, 20);  
  context.fillStyle = 'black';
  context.fillText ('black line of width 1.0 from (0,1.5) to (10,1.5)', 125, 120);

LineCapSample1

  var context = document.getElementById('LineCapSample1').getContext('2d'); 
  // orange border line
  context.strokeStyle = 'orange';
  context.beginPath(); 
  context.moveTo (0, 25);
  context.lineTo (530, 25);
  context.moveTo (0, 100);
  context.lineTo (530, 100);
  context.stroke();
  context.closePath();  
  // optional grid
  //context.addGrid (25);
  // settings for the lines and text
  context.font = '12pt sans-serif';
  context.textAlign = 'center';
  context.strokeStyle = 'black';
  // left "butt" example
  context.fillText ("'butt' (default)", 60, 135);
  context.lineCap = 'butt';
  context.lineWidth = 5.0;  
  context.beginPath(); context.moveTo (25, 25); context.lineTo (25, 100); context.stroke();
  context.lineWidth = 10.0;  
  context.beginPath(); context.moveTo (60, 25); context.lineTo (60, 100); context.stroke();
  context.lineWidth = 20.0;  
  context.beginPath(); context.moveTo (100, 25); context.lineTo (100, 100); context.stroke();
  // middle "round" example
  context.fillText ("'round'", 260, 135);
  context.lineCap = 'round';
  context.lineWidth = 5.0;  
  context.beginPath(); context.moveTo (225, 25); context.lineTo (225, 100); context.stroke();
  context.lineWidth = 10.0;  
  context.beginPath(); context.moveTo (260, 25); context.lineTo (260, 100); context.stroke();
  context.lineWidth = 20.0;  
  context.beginPath(); context.moveTo (300, 25); context.lineTo (300, 100); context.stroke();
  // right "square" example
  context.fillText ("'square'" , 460, 135);
  context.lineCap = 'square';
  context.lineWidth = 5.0;  
  context.beginPath(); context.moveTo (425, 25); context.lineTo (425, 100); context.stroke();
  context.lineWidth = 10.0;  
  context.beginPath(); context.moveTo (460, 25); context.lineTo (460, 100); context.stroke();
  context.lineWidth = 20.0;  
  context.beginPath(); context.moveTo (500, 25); context.lineTo (500, 100); context.stroke();    

LineJoinRound

  var context = document.getElementById('LineJoinRound').getContext('2d'); 
  context.scale (0.5, 0.5);
  context.lineWidth = 1.0;
  context.strokeStyle = 'orange';
  context.beginPath (); 
  context.moveTo (  0, 50);
  context.lineTo (600, 50);
  context.moveTo (  0, 150);
  context.lineTo (600, 150);
  context.stroke ();
  context.closePath ();
  context.font = "16pt sans-serif";
  context.strokeStyle = 'black';
  context.fillText ("lineJoin = 'round'", 25, 25);
  context.lineJoin = 'round';
  context.lineWidth = 20.0;
  context.beginPath ();
  context.moveTo ( 30, 100);
  context.lineTo (200, 150);
  context.lineTo (300,  50);
  context.lineTo (380, 150);
  context.lineTo (440,  50);
  context.lineTo (480, 150);
  context.lineTo (510,  50);
  context.lineTo (530, 150);
  context.lineTo (546,  50);
  context.lineTo (560, 150);
  context.lineTo (570, 100);
  context.stroke ();

LineJoinBevel

  var context = document.getElementById('LineJoinBevel').getContext('2d'); 
  context.scale (0.5, 0.5);
  context.lineWidth = 1.0;
  context.strokeStyle = 'orange';
  context.beginPath (); 
  context.moveTo (  0, 50);
  context.lineTo (600, 50);
  context.moveTo (  0, 150);
  context.lineTo (600, 150);
  context.stroke ();
  context.closePath ();
  context.font = "16pt sans-serif";
  context.strokeStyle = 'black';
  context.fillText ("lineJoin = 'bevel'", 25, 25);
  context.lineJoin = 'bevel';
  context.lineWidth = 20.0;
  context.beginPath ();
  context.moveTo ( 30, 100);
  context.lineTo (200, 150);
  context.lineTo (300,  50);
  context.lineTo (380, 150);
  context.lineTo (440,  50);
  context.lineTo (480, 150);
  context.lineTo (510,  50);
  context.lineTo (530, 150);
  context.lineTo (546,  50);
  context.lineTo (560, 150);
  context.lineTo (570, 100);
  context.stroke ();

LineJoinMiter

  var context = document.getElementById('LineJoinMiter').getContext('2d'); 
  context.scale (0.5, 0.5);
  context.lineWidth = 1.0;
  context.strokeStyle = 'orange';
  context.beginPath (); 
  context.moveTo (  0, 50);
  context.lineTo (600, 50);
  context.moveTo (  0, 150);
  context.lineTo (600, 150);
  context.stroke ();
  context.closePath ();
  context.font = "16pt sans-serif";
  context.strokeStyle = 'black';
  context.fillText ("lineJoin = 'miter'", 25, 25);
  context.lineJoin = 'miter';
  context.lineWidth = 20.0;
  context.beginPath ();
  context.moveTo ( 30, 100);
  context.lineTo (200, 150);
  context.lineTo (300,  50);
  context.lineTo (380, 150);
  context.lineTo (440,  50);
  context.lineTo (480, 150);
  context.lineTo (510,  50);
  context.lineTo (530, 150);
  context.lineTo (546,  50);
  context.lineTo (560, 150);
  context.lineTo (570, 100);
  context.stroke ();

MiterLimitCanvas1

  var context = document.getElementById('MiterLimitCanvas1').getContext('2d');    
  //context.addGrid();   
  // add the text
  context.textAlign = 'center';
  context.lineWidth = 1.0;
  context.font = '10pt sans-serif';
  context.fillStyle = 'black';
  context.fillText ("lineWidth = 25.0", 75, 25);
  context.fillText ("miterLimit = 20.0", 75, 45);  
  context.fillText ("lineWidth = 25.0", 275, 25);
  context.fillText ("miterLimit = 1.0", 275, 45);   
  // set lineJoin to miter (which is actually the default)
  context.lineJoin = 'miter';  
  // left example  
  context.miterLimit = 20.0;  
  context.strokeStyle = 'black';
  context.lineWidth = 25.0;
  context.beginPath();
  context.moveTo (25, 225);
  context.lineTo (75, 100);
  context.lineTo (125, 225);
  context.stroke();
  context.closePath();    
  context.strokeStyle = 'orange';
  context.lineWidth = 1.0;
  context.beginPath();
  context.moveTo (25, 225);
  context.lineTo (75, 100);
  context.lineTo (125, 225);
  context.stroke();
  context.closePath();    
  // right example
  context.miterLimit = 1.0;  
  context.strokeStyle = 'black';
  context.lineWidth = 25.0;
  context.beginPath();
  context.moveTo (225, 225);
  context.lineTo (275, 100);
  context.lineTo (325, 225);
  context.stroke();
  context.closePath();    
  context.strokeStyle = 'orange';
  context.lineWidth = 1.0;
  context.beginPath();
  context.moveTo (225, 225);
  context.lineTo (275, 100);
  context.lineTo (325, 225);
  context.stroke();
  context.closePath();
  // upper and lower orange border lines
  context.strokeStyle = 'orange';
  context.lineWidth = 1.0;
  context.beginPath();
  context.moveTo (0, 67);
  context.lineTo (350, 67);
  context.moveTo (0, 135);
  context.lineTo (350, 135);
  context.stroke();
  context.closePath();   

ShadowSample0

  var context = document.getElementById("ShadowSample0").getContext("2d");
  // General settings
  context.font = '40pt Arial';               // sets the font
  context.lineWidth = '5'                    // sets the line width for the strokeRect() calls below
  context.strokeStyle = 'green'              // sets the color for the strokeRect() calls below
  context.fillStyle = 'red';                 // sets the color for the fillText() and fillRect() calls below
  // #1 column with default (= no) shadow
  context.fillText ("# 1", 25, 45);
  context.fillRect (25, 70, 100, 100);
  context.strokeRect (25, 200, 100, 100);
  // #2 column  
  context.shadowOffsetX = 15;                // shadow appears 15 pixel to the right
  context.shadowOffsetY = 15;                // shadow appears 15 pixel to the botttom
  context.shadowColor = 'orange';            // shadow color now is 'orange'
  context.shadowBlur = 0;                    // zero blur: this is a crisp shadow
  context.fillText ("# 2", 225, 45);
  context.fillRect (225, 70, 100, 100);
  context.strokeRect (225, 200, 100, 100);
  // #3 column  
  context.shadowOffsetX = 15;                // again, lets shadows appear 15 pixel to the right
  context.shadowOffsetY = 15;                // ... and 15 pixel to the bottom
  context.shadowColor = 'rgba(0,0,0,0.5)';   // shadow color is black, but half transparent
  context.shadowBlur = 5;                    // shadow is blurred
  context.fillText ("# 3", 425, 45);
  context.fillRect (425, 70, 100, 100);
  context.strokeRect (425, 200, 100, 100);  

ShadowOffsetXSample

  var context = document.getElementById("ShadowOffsetXSample").getContext('2d');
  // settings for the use of fillText below
  context.fillStyle = 'black';
  context.font = '40pt Arial';
  // set the shadow color to a visible 'orange'
  context.shadowColor = 'orange';
  // #1 text with horizontal shadow offset 0 (i.e. shadow behind the text and thus invisible)
  context.shadowOffsetX = 0;
  context.fillText ("#1",  50, 50);
  // #2 text with horizontal shadow offset 10 (i.e. 10 pixel to the right)
  context.shadowOffsetX = 10;
  context.fillText ("#2", 200, 50);
  // #3 text with horizontal shadow offset -10 (i.e. 10 pixel to the left)
  context.shadowOffsetX = -10;
  context.fillText ("#3", 350, 50);
  // #4 text with horizontal shadow offset 75 (i.e. 75 pixel to the right)
  context.shadowOffsetX = 75;
  context.fillText ("#4", 500, 50);

ShadowOffsetYSample

  var context = document.getElementById("ShadowOffsetYSample").getContext('2d');
  // settings for the use of fillText below
  context.fillStyle = 'black';
  context.font = '40pt Arial';
  // set the shadow color to a visible 'orange'
  context.shadowColor = 'orange';
  // #1 text with vertical shadow offset 0 (i.e. shadow behind the text and thus invisible)
  context.shadowOffsetY = 0;
  context.fillText ("#1",  50, 50);
  // #2 text with vertical shadow offset 10 (i.e. 10 pixel down)
  context.shadowOffsetY = 10;
  context.fillText ("#2", 200, 50);
  // #3 text with vertical shadow offset -10 (i.e. 10 pixel up)
  context.shadowOffsetY = -10;
  context.fillText ("#3", 350, 50);
  // #4 text with vertical shadow offset 75 (i.e. 75 pixel down)
  context.shadowOffsetY = 75;
  context.fillText ("#4", 500, 50);

ShadowBlurSample1

  var context = document.getElementById("ShadowBlurSample1").getContext('2d');
  // settings for the use of fillText below
  context.fillStyle = 'black';
  context.font = '40pt Arial';
  // set the shadow color to a visible 'orange' and the x- and y-offset to 15
  context.shadowColor = 'orange';
  context.shadowOffsetX = 15;
  context.shadowOffsetY = 15;
  // #1 
  context.shadowBlur = 0;
  context.fillText ("#1",  50, 50);
  // #2 
  context.shadowBlur = 2;
  context.fillText ("#2", 200, 50);
  // #3 
  context.shadowBlur = 4;
  context.fillText ("#3", 350, 50);
  // #4 
  context.shadowBlur = 8;
  context.fillText ("#4", 500, 50);

ShadowBlurSample2

  var context = document.getElementById("ShadowBlurSample2").getContext('2d');
  // text settings
  context.font = '28pt Arial';
  context.fillStyle = 'red';
  // shadow settings
  context.shadowColor = 'blue';
  context.shadowBlur = 5;
  context.shadowOffsetX = 0;
  context.shadowOffsetY = 0;
  // add the text
  context.fillText ("shadow: blur 5, color blue, x- and y-offset 0", 20, 50);

ShadowColorSample

  var context = document.getElementById("ShadowColorSample").getContext('2d');
  // settings for the use of fillText below
  context.fillStyle = 'black';
  context.font = '40pt Arial';
  // set the shadow color to a visible 'orange' and the x- and y-offset to 15
  context.shadowBlur = 3;
  context.shadowOffsetX = 15;
  context.shadowOffsetY = 15;
  // #1
  context.shadowColor = 'aqua';
  context.fillText ("#1",  50, 50);
  // #2 
  context.shadowColor = 'rgba(0%,0%,0%,0.5)';
  context.fillText ("#2", 200, 50);
  // #3
  context.shadowColor = '#CCCCCC';
  context.fillText ("#3", 350, 50);
  // #4
  context.shadowColor = 'hsl(120,50%,50%)';
  context.fillText ("#4", 500, 50);

FillRectSample

    var context = document.getElementById('FillRectSample').getContext('2d');
    context.addGrid();
    // 1. draw a filled rectangle in default black
    context.fillStyle = 'black';                            // this line is actually superfluous, because 'black' is default
    context.fillRect(50,50,100,100);                        // draw the first rectangle
    
    // 2. draw a filled rectangle in redd
    context.fillStyle = 'red';                              // change the fillStyle to the color 'red'
    context.fillRect(200,50,100,100);                       // draw the second rectangle
    
    // 3. draw a fancy rectangle with linear gradient
    var lg = context.createLinearGradient(350,50,450,150);  // create a linear gradient
    lg.addColorStop(0,'yellow');                            // start (=0) the gradient with 'yellow'
    lg.addColorStop(1,'red');                               // finish (=1) the gradient with 'red'
    context.fillStyle = lg;                                 // set the fillStyle to this new linear gradient
    context.fillRect(350,50,100,100);                       // draw the third rectangle

StrokeRectSample

    var context = document.getElementById('StrokeRectSample').getContext('2d');
    context.addGrid();
    // 1. draw a rectangle with black strokes 
    context.lineWidth = 1.0;                                // this is actually superfluous, because 1.0 is default
    context.strokeStyle = 'black';                          // this is superfluous, too, because 'black' is default anyway 
    context.strokeRect(50,50,100,100);                      // draw the first rectangle
    
    // 2. draw a rectangle with red strokes
    context.lineWidth = 7.0;                                // change the line width to 7.0
    context.strokeStyle = 'red';                            // change the strokeStyle to the color 'red'
    context.strokeRect(200,50,100,100);                     // draw the second rectangle
      
    // 3. draw a rectangle with strokes in gradient style
    context.lineWidth = 12.0;                               // increase the line width, once more
    var lg = context.createLinearGradient(350,50,450,150);  // define a linear gradient
    lg.addColorStop(0,'yellow');                            // start the gradient with the color 'yellow'
    lg.addColorStop(1,'red');                               // let the gradient end with the color 'red'
    context.strokeStyle = lg;                               // set the strokeStyle to this new gradient
    context.strokeRect(350,50,100,100);                     // draw the third rectangle

ClearRectSample

    var context = document.getElementById('ClearRectSample').getContext('2d');
    context.addGrid();
    // 1. fill the whole canvas area with a transparent green color
    context.fillStyle = 'rgba(0%,100%,0%,0.3)';  // green color with 0.3 transparency
    context.fillRect (0,0,300,200);              // filled rectangle over the whole canvas area
    
    // 2. draw a yellow rectangular box 
    context.lineWidth = 10.0;                    // set the line width to 10
    context.strokeStyle = 'yellow';              // set the strokeStyle to the color 'yellow'
    context.strokeRect(25,25,100,100);           // draw the yellow box
    
    // 3. cut out a rectangle from the canvas  
    context.clearRect (100,50,200,150);          // delete all content in this rectangle  

DrawRectangle1

    var context = document.getElementById('DrawRectangle1').getContext('2d');
    context.fillStyle = 'rgba(255,0,0,0.5)';   // fill style is now set to a half transparent red color
    context.fillRect (80, 20, 100, 60);        // draw the rectangle with left upper corner (80,20), width 100 and height 60

DrawRectangle3

  var context = document.getElementById('DrawRectangle3').getContext('2d');
  context.addGrid (20);
  context.lineWidth = 2.0;
  // first the red line
    context.strokeStyle = 'cyan';
    context.beginPath();
    context.moveTo (0, 0);
    context.lineTo (80, 20);
    context.stroke();
  // then the black rectangle frame
    context.strokeStyle = 'black';
    context.beginPath();
    context.moveTo (80, 20);
    context.lineTo (180, 20);
    context.lineTo (180, 80);
    context.lineTo (80, 80);
    context.lineTo (80, 20);
    context.stroke();
  // add some text
    context.fillStyle = 'black'
    context.fillText ('1.', 20, 25);
    context.fillText ('2.', 125, 15);
    context.fillText ('3.', 190, 60);
    context.fillText ('4.', 125, 95);
    context.fillText ('5.', 65, 60);    

DrawRectangle4

    var context = document.getElementById('DrawRectangle4').getContext('2d');
    // set the style for the stroke() call below
    context.strokeStyle = 'rgba(255,0,0,0.5)';          // now: strokeStyle instead of fillStyle
    // the same path again as before:
    context.beginPath();
    context.moveTo (80, 20);
    context.lineTo (180, 20);
    context.lineTo (180, 80);
    context.lineTo (80, 80);
    context.lineTo (80, 20);
    context.stroke();                                 // now: stroke() insted of fill()
    context.closePath();

ClosePathSample1

  var context = document.getElementById('ClosePathSample1').getContext('2d');
  context.addGrid();
  context.lineWidth = 5.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo(150,25);      // starting point at the top of the triangle
  context.lineTo(250,100);     // line to right bottom corner
  context.lineTo(50,100);      // line to left bottom corner
  context.stroke();            // draw the lines

ClosePathSample2

  var context = document.getElementById('ClosePathSample2').getContext('2d');
  context.addGrid();
  context.lineWidth = 5.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo(150,25);      // starting point at the top of the triangle
  context.lineTo(250,100);     // line to right bottom corner
  context.lineTo(50,100);      // line to left bottom corner
  context.closePath();         // closes the shape with a line from the left bottom to the initial top point
  context.stroke();            // draw the lines

ClosePathSample3

  var context = document.getElementById('ClosePathSample3').getContext('2d');
  context.addGrid();
  context.fillStyle = 'red';
  context.beginPath();
  context.moveTo(150,25);
  context.lineTo(250,100);
  context.lineTo(50,100);
  context.closePath();
  context.fill();

StrokeSample1

  var context = document.getElementById('StrokeSample1').getContext('2d');
  context.addGrid ();
  // settings for both shapes
  context.lineWidth = 10.0;
  // the first shape
  context.beginPath();
  context.strokeStyle = 'lime';
  context.moveTo (25, 25);
  context.lineTo (25, 125);
  context.lineTo (125, 125);
  context.stroke();
  // the second shape
  context.beginPath();
  context.strokeStyle = 'maroon';
  context.moveTo (175, 25);
  context.lineTo (175, 125);
  context.lineTo (275, 125);
  context.stroke();  

StrokeSample2

  var context = document.getElementById('StrokeSample2').getContext('2d');
  context.addGrid ();
  // settings for both lines
  context.lineWidth = 10.0;
  // the first shape
  context.beginPath();
  context.strokeStyle = 'lime';
  context.moveTo (25, 25);
  context.lineTo (25, 125);
  context.lineTo (125, 125);
  context.closePath();
  context.stroke();
  // the second shape
  context.beginPath();
  context.strokeStyle = 'maroon';
  context.moveTo (175, 25);
  context.lineTo (175, 125);
  context.lineTo (275, 125);
  context.closePath();
  context.stroke();  

FillSample1

  var context = document.getElementById('FillSample1').getContext('2d');
  context.addGrid ();
  // the first triangle
  context.fillStyle = 'lime';    // set the color for shapes subsequently drawn with fill() to 'lime'
  context.beginPath();           // start a new path
  context.moveTo (25, 25);       // go to (25,25), which now becomes the current point in the path 
  context.lineTo (25, 125);      // add a line from (25,25) to (25,125); the latter is the new current point in the path
  context.lineTo (125, 125);     // add another line from (25,125) to (125,125) to the path
  context.fill();                // the path is closed with a line from (125,125) to the initial (25,25) and 
                                 // the shape area is now drawn with the fillStyle color 'lime'
  // the second triangle
  context.beginPath();           // start another path
  context.moveTo (175, 25);      // go to (175,25)
  context.lineTo (175, 125);     // add a line from (175,25) to (175,125)
  context.lineTo (275, 125);     // add a line from (175,125) to (275,125)
  context.fillStyle = 'maroon';  // set the fillStyle to the color 'maroon'
  context.fill();                // close the path, making it a triangle, and draw the shape area in 'maroon' color

NonConvexShape0

  var context = document.getElementById('NonConvexShape0').getContext('2d');
  context.addGrid();
  context.beginPath();
  context.moveTo (50,25);   
  context.lineTo (50,125);
  context.lineTo (150,25);  
  context.lineTo (150,125);
  context.lineTo (250,25);  
  context.lineTo (250,125);
  context.lineWidth = 2.0;
  context.strokeStyle = 'red';
  context.stroke();

NonConvexShape1

  var context = document.getElementById('NonConvexShape1').getContext('2d');
  context.addGrid();
  context.fillStyle = 'red';
  context.fillRect(50,25,200,100);

NonConvexShape2

  var context = document.getElementById('NonConvexShape2').getContext('2d');
  context.addGrid();
  context.beginPath();
  context.moveTo (50,25);   
  context.lineTo (50,125);
  context.lineTo (150,25);  
  context.lineTo (150,125);
  context.lineTo (250,25);  
  context.lineTo (250,125);
  context.fillStyle = 'red';
  context.fill();

NonConvexShape3

  var context = document.getElementById('NonConvexShape3').getContext('2d');
  context.addGrid();
  context.beginPath();
  context.moveTo (50,25);   
  context.lineTo (50,125);
  context.lineTo (150,25);  
  context.lineTo (150,125);
  context.lineTo (250,25);  
  context.lineTo (250,125);
  context.closePath();
  context.lineWidth = 2.0;
  context.strokeStyle = 'red';
  context.stroke();

LineToSample1

  var context = document.getElementById('LineToSample1').getContext('2d');
  context.addGrid(30);
  context.strokeStyle = 'navy'; // set the strokeStyle color to 'navy' (for the stroke() call below)
  context.lineWidth = 3.0;      // set the line width to 3 pixels
  context.beginPath();          // start a new path
  context.moveTo (150,30);      // set (150,20) to be the starting point
  context.lineTo (270,120);     // line from (150,30) to (270,120)
  context.lineTo (30,120);      // horizontal line from (270,120) to (30,120)
  context.lineTo (150,30);      // line back to the starting point (we could have called closePath() instead)
  context.stroke();             // actually draw the triangle shape in 'navy' color and 3 pixel wide lines

LineToSample2

  var context = document.getElementById('LineToSample2').getContext('2d');
  context.addGrid(30);
  context.fillStyle = 'navy';   // set the fillStyle color to 'navy' (for the fill() call below)
  context.beginPath();          // start a new path
  context.moveTo (150,30);      // set (150,20) to be the starting point
  context.lineTo (270,120);     // line from (150,30) to (270,120)
  context.lineTo (30,120);      // horizontal line from (270,120) to (30,120)
  context.fill();               // actually draw the triangle shape in 'navy' color and 3 pixel wide lines

MoveToSample1

  var context = document.getElementById('MoveToSample1').getContext('2d');
  context.addGrid();
  // set the line style to be drawn with stroke()
  context.lineWidth = 9.0;
  context.strokeStyle = 'red';
  // create the path
  context.beginPath();
  context.moveTo (50,25);   context.lineTo (50,75);    // first vertical line
  context.moveTo (100,25);  context.lineTo (100,75);   // second vertical line
  context.moveTo (150,25);  context.lineTo (150,75);   // third vertical line
  context.stroke();

MoveToSample2

  var context = document.getElementById('MoveToSample2').getContext('2d');
  context.addGrid();
  context.lineWidth = 9.0;
  context.strokeStyle = 'red';
  context.beginPath();
    context.lineTo (50,25);   context.lineTo (50,75);
    context.lineTo (100,25);  context.lineTo (100,75);
    context.lineTo (150,25);  context.lineTo (150,75);
  context.stroke();

RectSample1

  var context = document.getElementById ('RectSample1').getContext('2d');
  context.addGrid(20);
  context.beginPath();
  context.rect (20,60,60,60);
  context.moveTo (10,70);
  context.lineTo (50,10);
  context.lineTo (90,70);  
  context.strokeStyle = "black";
  context.lineWidth = 5.0;
  context.stroke();  

RectSample2

  var context = document.getElementById ('RectSample2').getContext('2d');
  context.addGrid(20);
  context.beginPath();
  context.rect (20,60,60,60);
  context.moveTo (10,70);
  context.lineTo (50,10);
  context.lineTo (90,70);
  var lg = context.createLinearGradient (20,20,100,130);  // create a linear gradient named lg
  lg.addColorStop (0, 'yellow');                          // set the color of lg at the beginning (=top) to 'yellow'
  lg.addColorStop (1, 'red');                             // set the color of lg at the end (right bottom) to 'red'
  context.fillStyle = lg;                                 // set the fillStyle to lg
  context.fill();                                         // paint the house according to the fillStyle settings

QuadraticCurveSample0

    var context = document.getElementById('QuadraticCurveSample0').getContext('2d');
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);                       
    context.quadraticCurveTo (210, 30, 210, 120);
    context.stroke(); 

QuadraticCurveSample1

    var context = document.getElementById('QuadraticCurveSample1').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();     // point 0
    context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill();     // cp
    context.beginPath(); context.arc(210,120,3,0,2*Math.PI); context.fill();     // point 1
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 30, 140);
    context.fillText ('1', 210, 140);
    context.fillText ('cp', 190, 25);    

QuadraticCurveSample2

    var context = document.getElementById('QuadraticCurveSample2').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();     // point 0
    context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill();     // cp
    context.beginPath(); context.arc(210,120,3,0,2*Math.PI); context.fill();     // point 1
    // the lines
    context.strokeStyle = 'green';
    context.lineWidth = 1.0;
    context.beginPath();
    context.moveTo (240,15);
    context.lineTo (0,135);
    context.moveTo (210,0);
    context.lineTo (210,150);
    context.stroke();    
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 30, 140);
    context.fillText ('1', 210, 140);
    context.fillText ('cp', 190, 25);    
    // the curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);
    context.quadraticCurveTo (210, 30, 210, 120);
    context.stroke(); 

QuadraticCurveShape0

    var context = document.getElementById('QuadraticCurveShape0').getContext('2d');
    context.addGrid();    
    // the curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (150,25);
    context.quadraticCurveTo (275,25,275,75);    
    context.quadraticCurveTo (275,125,150,125);    
    context.quadraticCurveTo (25,125,25,75);    
    context.quadraticCurveTo (25,25,150,25);    
    context.stroke();        

QuadraticCurveShape1

    var context = document.getElementById('QuadraticCurveShape1').getContext('2d');
    context.addGrid();
    // the tangents
    context.lineWidth = 1.0;
    context.strokeStyle = 'green';
    context.beginPath();
    context.moveTo (0,25); context.lineTo (300,25);    // upper horizontal line
    context.moveTo (0,125); context.lineTo (300,125);  // lower horizontal line
    context.moveTo (25,0); context.lineTo (25,150);    // left vertical line
    context.moveTo (275,0); context.lineTo (275,150);  // right vertical line   
    context.stroke();    
    // the curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (150,25);
    context.quadraticCurveTo (275,25,275,75);    
    context.quadraticCurveTo (275,125,150,125);    
    context.quadraticCurveTo (25,125,25,75);    
    context.quadraticCurveTo (25,25,150,25);    
    context.stroke();        

QuadraticCurveShape2

    var context = document.getElementById('QuadraticCurveShape2').getContext('2d');
    context.addGrid();
    // the tangents
    context.lineWidth = 1.0;
    context.strokeStyle = 'green';
    context.beginPath();
    context.moveTo (0,25); context.lineTo (300,25);    // upper horizontal line
    context.moveTo (0,125); context.lineTo (300,125);  // lower horizontal line
    context.moveTo (25,0); context.lineTo (25,150);    // left vertical line
    context.moveTo (275,0); context.lineTo (275,150);  // right vertical line   
    context.stroke();    
    // the dots
    context.fillStyle = 'green';
    var dotRadius = 5;
    context.beginPath(); context.arc(150, 25,dotRadius,0,2*Math.PI); context.fill();     // point 0
    context.beginPath(); context.arc(275, 25,dotRadius,0,2*Math.PI); context.fill();     // cp1
    context.beginPath(); context.arc(275, 75,dotRadius,0,2*Math.PI); context.fill();     // point 1        
    // dot text
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 150, 13);
    context.fillText ('1', 290, 75);
    context.font = '8pt sans-serif';
    context.fillText ('cp1', 290, 13); 
    // the curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (150,25);
    context.quadraticCurveTo (275,25,275,75);    
    context.stroke();     

QuadraticCurveShape3

    var context = document.getElementById('QuadraticCurveShape3').getContext('2d');
    context.addGrid();
    // the tangents
    context.lineWidth = 1.0;
    context.strokeStyle = 'green';
    context.beginPath();
    context.moveTo (0,25); context.lineTo (300,25);    // upper horizontal line
    context.moveTo (0,125); context.lineTo (300,125);  // lower horizontal line
    context.moveTo (25,0); context.lineTo (25,150);    // left vertical line
    context.moveTo (275,0); context.lineTo (275,150);  // right vertical line   
    context.stroke();    
    // the dots
    context.fillStyle = 'green';
    var dotRadius = 5;
    context.beginPath(); context.arc(150, 25,dotRadius,0,2*Math.PI); context.fill();     // point 0
    context.beginPath(); context.arc(275, 75,dotRadius,0,2*Math.PI); context.fill();     // point 1        
    context.beginPath(); context.arc(150,125,dotRadius,0,2*Math.PI); context.fill();     // point 2        
    context.beginPath(); context.arc( 25, 75,dotRadius,0,2*Math.PI); context.fill();     // point 3        
    context.beginPath(); context.arc(275, 25,dotRadius,0,2*Math.PI); context.fill();     // cp1
    context.beginPath(); context.arc(275,125,dotRadius,0,2*Math.PI); context.fill();     // cp2        
    context.beginPath(); context.arc( 25,125,dotRadius,0,2*Math.PI); context.fill();     // cp3       
    context.beginPath(); context.arc( 25, 25,dotRadius,0,2*Math.PI); context.fill();     // cp4        
    // dot text
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0',150, 13);
    context.fillText ('1',290, 75);
    context.fillText ('2',150,140);
    context.fillText ('3', 11, 75);
    context.font = '8pt sans-serif';
    context.fillText ('cp1',288, 13); 
    context.fillText ('cp2',288,138); 
    context.fillText ('cp3', 13,138); 
    context.fillText ('cp4', 13, 13); 
    // the curve
    context.lineWidth = 5.0;                        // set the line width for the stroke() call below
    context.strokeStyle = 'red';                    // set the color to 'red' for the stroke() call below
    context.beginPath();                            // start the new path
    context.moveTo (150,25);                        // move to point 0 at (150,25)
    context.quadraticCurveTo (275,25,275,75);       // curve from point 0 to point 1 at (275,75)
    context.quadraticCurveTo (275,125,150,125);     // curve from point 1 to point 2 at (150,125)
    context.quadraticCurveTo (25,125,25,75);        // curve from point 2 to point 3 at (25,75)
    context.quadraticCurveTo (25,25,150,25);        // curve from point 3 back to point 0
    context.stroke();                               // draw the shape defined by the current path

EllipseWithQuadraticCurve

    var context = document.getElementById('EllipseWithQuadraticCurve').getContext('2d');
    context.addGrid();    
    // the curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (150,25);
    context.quadraticCurveTo (275,  25, 275,  75);    
    context.quadraticCurveTo (275, 125, 150, 125);    
    context.quadraticCurveTo ( 25, 125,  25,  75);    
    context.quadraticCurveTo ( 25,  25, 150,  25);    
    context.stroke();        

EllipseWithBezierCurve

    var context = document.getElementById('EllipseWithBezierCurve').getContext('2d');
    context.addGrid();    
    // the curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (150,25);
    context.bezierCurveTo (275,  25, 275,  25, 275,  75);    
    context.bezierCurveTo (275, 125, 275, 125, 150, 125);    
    context.bezierCurveTo ( 25, 125,  25, 125,  25,  75);    
    context.bezierCurveTo ( 25,  25,  25,  25, 150,  25);    
    context.stroke();        

BezierSample1

    var context = document.getElementById('BezierSample1').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();      // point 0
    context.beginPath(); context.arc(120, 30,3,0,2*Math.PI); context.fill();      // cp1
    context.beginPath(); context.arc(240, 30,3,0,2*Math.PI); context.fill();      // cp2
    context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill();      // point 1
    // the lines
    context.strokeStyle = 'green';
    context.lineWidth = 1.0;
    context.beginPath();
    context.moveTo (0,150);
    context.lineTo (150,0);
    context.moveTo (240,0);
    context.lineTo (240,150);  
    context.stroke();
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 30, 140);
    context.fillText ('1', 260, 120);
    context.fillText ('cp1', 100, 25);
    context.fillText ('cp2', 270, 30);  
    // the bezier curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);                              // go to point 0 at (30,120)
    context.bezierCurveTo (120, 30, 240, 30, 240, 120);   // go to point 1 at (240,120) 
    context.stroke();  

BezierSample2

    var context = document.getElementById('BezierSample2').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();      // point 0
    context.beginPath(); context.arc(120, 30,3,0,2*Math.PI); context.fill();      // cp1
    context.beginPath(); context.arc(240, 30,3,0,2*Math.PI); context.fill();      // cp2
    context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill();      // point 1
    // the lines
    context.strokeStyle = 'green';
    context.lineWidth = 1.0;
    context.beginPath();
    context.moveTo (0,150);
    context.lineTo (150,0);
    context.moveTo (240,0);
    context.lineTo (240,150);  
    context.stroke();
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 30, 140);
    context.fillText ('cp2', 265, 120);
    context.fillText ('cp1', 100, 25);
    context.fillText ('1', 260, 30);  
    // the bezier curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);
    context.bezierCurveTo (120, 30, 240, 120, 240, 30);
    context.stroke();  

BezierSample3

    var context = document.getElementById('BezierSample3').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();      // point 0
    context.beginPath(); context.arc( 90, 60,3,0,2*Math.PI); context.fill();      // cp1
    context.beginPath(); context.arc(180, 90,3,0,2*Math.PI); context.fill();      // cp2
    context.beginPath(); context.arc(120, 60,3,0,2*Math.PI); context.fill();      // point 1
    // the lines
    context.strokeStyle = 'green';
    context.lineWidth = 1.0;
    context.beginPath();
    context.moveTo (0,150);
    context.lineTo (150,0);
    context.moveTo (0,0);
    context.lineTo (300,150);  
    context.stroke();
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 30, 140);
    context.fillText ('cp2', 205, 90);
    context.fillText ('cp1', 60, 60);
    context.fillText ('1', 130, 55);  
    // the bezier curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);
    context.bezierCurveTo (90, 60, 180, 90, 120, 60);
    context.stroke();  

BezierSample1again

    var context = document.getElementById('BezierSample1again').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();      // point 0
    context.beginPath(); context.arc(120, 30,3,0,2*Math.PI); context.fill();      // cp1
    context.beginPath(); context.arc(240, 30,3,0,2*Math.PI); context.fill();      // cp2
    context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill();      // point 1
    // the lines
    context.strokeStyle = 'green';
    context.lineWidth = 1.0;
    context.beginPath();
    context.moveTo (0,150);
    context.lineTo (150,0);
    context.moveTo (240,0);
    context.lineTo (240,150);  
    context.stroke();
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 30, 140);
    context.fillText ('1', 260, 120);
    context.fillText ('cp1', 100, 25);
    context.fillText ('cp2', 270, 30);  
    // the bezier curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);                              // go to point 0 at (30,120)
    context.bezierCurveTo (120, 30, 240, 30, 240, 120);   // go to point 1 at (240,120) 
    context.stroke();  

BezierSample4

    var context = document.getElementById('BezierSample4').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();      // point 0
    context.beginPath(); context.arc( 60, 90,3,0,2*Math.PI); context.fill();      // cp1
    context.beginPath(); context.arc(240, 30,3,0,2*Math.PI); context.fill();      // cp2
    context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill();      // point 1
    // the lines
    context.strokeStyle = 'green';
    context.lineWidth = 1.0;
    context.beginPath();
    context.moveTo (0,150);
    context.lineTo (150,0);
    context.moveTo (240,0);
    context.lineTo (240,150);  
    context.stroke();
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 30, 140);
    context.fillText ('1', 260, 120);
    context.fillText ('cp1', 40, 90);
    context.fillText ('cp2', 270, 30);  
    // the bezier curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);                              // go to point 0 at (30,120)
    context.bezierCurveTo (60, 90, 240, 30, 240, 120);   // go to point 1 at (240,120) 
    context.stroke();  

BezierSample5

    var context = document.getElementById('BezierSample5').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();      // point 0
    context.beginPath(); context.arc( 60, 90,3,0,2*Math.PI); context.fill();      // cp1
    context.beginPath(); context.arc(240, 90,3,0,2*Math.PI); context.fill();      // cp2
    context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill();      // point 1
    // the lines
    context.strokeStyle = 'green';
    context.lineWidth = 1.0;
    context.beginPath();
    context.moveTo (0,150);
    context.lineTo (150,0);
    context.moveTo (240,0);
    context.lineTo (240,150);  
    context.stroke();
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0', 30, 140);
    context.fillText ('1', 260, 120);
    context.fillText ('cp1', 40, 90);
    context.fillText ('cp2', 270, 90);  
    // the bezier curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);                              // go to point 0 at (30,120)
    context.bezierCurveTo (60, 90, 240, 90, 240, 120);   // go to point 1 at (240,120) 
    context.stroke();  

BezierSample6

    var context = document.getElementById('BezierSample6').getContext('2d');
    context.addGrid(30);
    // text settings
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    // the dots
    context.fillStyle = 'green';
    context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill();      // point 0
    context.beginPath(); context.arc(240, 90,3,0,2*Math.PI); context.fill();      // cp2
    context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill();      // point 1
    // the lines
    context.strokeStyle = 'green';
    context.lineWidth = 1.0;
    context.beginPath();
    context.moveTo (240,0);
    context.lineTo (240,150);  
    context.stroke();
    // dot text
    context.fillStyle = 'black';
    context.font = '10pt sans-serif';
    context.fillText ('0 = cp1', 30, 140);
    context.fillText ('1', 260, 120);
    context.fillText ('cp2', 270, 90);  
    // the bezier curve
    context.lineWidth = 5.0;
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo (30,120);                              // go to point 0 at (30,120)
    context.bezierCurveTo (30, 120, 240, 90, 240, 120);   // go to point 1 at (240,120) 
    context.stroke();  

BezierHart0

    var context = document.getElementById('BezierHart0').getContext('2d');
    context.addGrid(30);
    context.fillStyle = 'red';
    context.beginPath();
    context.moveTo (150,60);                        // start at point 0
    context.bezierCurveTo (150,30, 100,30, 90,30);  // from point 0 to point 1
    context.bezierCurveTo (60,30,30,60,30,90);      // from point 1 to point 2
    context.bezierCurveTo (30,180,90,210,150,240);  // from point 2 to point 3 
    context.bezierCurveTo (210,210,270,180,270,90); // from point 3 to point 4 
    context.bezierCurveTo (270,60,240,30,210,30);   // from point 4 to point 5
    context.bezierCurveTo (180,30,150,30,150,60);   // from point 5 to point 0
    context.fill();   

BezierHart1

  var context = document.getElementById('BezierHart1').getContext('2d');
  context.addGrid(30);
  // the dots
  context.fillStyle = 'green';
  context.beginPath(); context.arc(150, 60,3,0,2*Math.PI); context.fill();      // point 0
  context.beginPath(); context.arc( 90, 30,3,0,2*Math.PI); context.fill();      // point 1
  context.beginPath(); context.arc( 30, 90,3,0,2*Math.PI); context.fill();      // point 2
  context.beginPath(); context.arc(150,240,3,0,2*Math.PI); context.fill();      // point 3    
  context.beginPath(); context.arc(270, 90,3,0,2*Math.PI); context.fill();      // point 4    
  context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill();      // point 5
  // text 
  context.textBaseline = 'middle';
  context.textAlign = 'center';
  context.fillStyle = 'black';
  context.font = "12pt sans-serif";
  context.fillText ('0',150,75); 
  context.fillText ('1',90,15); 
  context.fillText ('2',15,90); 
  context.fillText ('3',150,255); 
  context.fillText ('4',285,90); 
  context.fillText ('5',210,15);     
  // 1.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo (150,60);  // point0
  context.lineTo (150,30);  // cp1
  context.moveTo (90,30);   // point1
  context.lineTo (120,30);  // cp2
  context.stroke();
  // 1.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (150,60);                          // point0
  context.bezierCurveTo (150,30, 100,30, 90,30);  // cp1, cp2, point1
  context.stroke();  
  // 2.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(90,30); // point1
  context.lineTo(60,30); // cp3
  context.moveTo(30,90);// point2
  context.lineTo(30,60); // cp4
  context.stroke();  
  // 2.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (90,30); // point1
  context.bezierCurveTo (60,30,30,60,30,90); // cp3, cp4, point2
  context.stroke();  
  // 3.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(30,90); // point2
  context.lineTo(30,180); // cp5
  context.moveTo(150,240);// point3
  context.lineTo(90,210); // cp6
  context.stroke();  
  // 3.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (30,90); // point2
  context.bezierCurveTo (30,180,90,210,150,240); // cp5, cp6, point3 
  context.stroke();   
  // 4.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(150,240); // point3
  context.lineTo(210,210); // cp7
  context.moveTo(270,90);// point4
  context.lineTo(270,180); // cp8
  context.stroke();  
  // 4.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (150,240); // point3
  context.bezierCurveTo (210,210,270,180,270,90); // cp7, cp8, point4 
  context.stroke();   
  // 5.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(270,90); // point4
  context.lineTo(270,60); // cp9
  context.moveTo(210,30);// point5
  context.lineTo(240,30); // cp10
  context.stroke();  
  // 5.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (270,90); // point4
  context.bezierCurveTo (270,60,240,30,210,30); // cp9, cp10, point5
  context.stroke();   
  // 6.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(210,30); // point5
  context.lineTo(180,30); // cp11
  context.moveTo(150,60);// point0
  context.lineTo(150,30); // cp12
  context.stroke();  
  // 6.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (210,30); // point5
  context.bezierCurveTo (180,30,150,30,150,60); // cp11, cp12, point0
  context.stroke();   

BezierHart2

  var context = document.getElementById('BezierHart2').getContext('2d');
  context.addGrid(30);
  // the dots
  context.fillStyle = 'green';
  context.beginPath(); context.arc(150, 60,3,0,2*Math.PI); context.fill();      // point 0
  context.beginPath(); context.arc( 90, 30,3,0,2*Math.PI); context.fill();      // point 1
  // text 
  context.textBaseline = 'middle';
  context.textAlign = 'center';
  context.fillStyle = 'black';
  context.font = "12pt sans-serif";
  context.fillText ('0',150,75); 
  context.fillText ('1',90,15); 
  // 1.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo (150,60);  // point0
  context.lineTo (150,30);  // cp1
  context.moveTo (90,30);   // point1
  context.lineTo (120,30);  // cp2
  context.stroke();
  // 1.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (150,60);                          // point0
  context.bezierCurveTo (150,30, 100,30, 90,30);  // cp1, cp2, point1
  context.stroke();
  // the command text
  context.fillStyle = 'black';
  context.font = "10pt monospace";
  context.textAlign = 'left';
  context.fillText ( 'moveTo(150,60); // start at point 0',10,150 );
  context.fillText ( 'bezierCurveTo(150,30,100,30,90,30);',10,180);  

BezierHart3

  var context = document.getElementById('BezierHart3').getContext('2d');
  context.addGrid(30);
  // the dots
  context.fillStyle = 'green';
  context.beginPath(); context.arc( 90, 30,3,0,2*Math.PI); context.fill();      // point 1
  context.beginPath(); context.arc( 30, 90,3,0,2*Math.PI); context.fill();      // point 2
  // text 
  context.textBaseline = 'middle';
  context.textAlign = 'center';
  context.fillStyle = 'black';
  context.font = "12pt sans-serif";
  context.fillText ('1',90,15); 
  context.fillText ('2',15,90); 
  // 2.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(90,30); // point1
  context.lineTo(60,30); // cp3
  context.moveTo(30,90);// point2
  context.lineTo(30,60); // cp4
  context.stroke();  
  // 2.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (90,30); // point1
  context.bezierCurveTo (60,30,30,60,30,90); // cp3, cp4, point2
  context.stroke();  
  // the command text
  context.fillStyle = 'black';
  context.font = "10pt monospace";
  context.textAlign = 'left';
  context.fillText ( 'bezierCurveTo(60,30,30,60,30,90);',10,180);  

BezierHart4

  var context = document.getElementById('BezierHart4').getContext('2d');
  context.addGrid(30);
  // the dots
  context.fillStyle = 'green';
  context.beginPath(); context.arc( 30, 90,3,0,2*Math.PI); context.fill();      // point 2
  context.beginPath(); context.arc(150,240,3,0,2*Math.PI); context.fill();      // point 3    
  // text 
  context.textBaseline = 'middle';
  context.textAlign = 'center';
  context.fillStyle = 'black';
  context.font = "12pt sans-serif";
  context.fillText ('2',15,90); 
  context.fillText ('3',150,255); 
  // 3.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(30,90); // point2
  context.lineTo(30,180); // cp5
  context.moveTo(150,240);// point3
  context.lineTo(90,210); // cp6
  context.stroke();  
  // 3.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (30,90); // point2
  context.bezierCurveTo (30,180,90,210,150,240); // cp5, cp6, point3 
  context.stroke();   
  // the command text
  context.fillStyle = 'black';
  context.font = "10pt monospace";
  context.textAlign = 'left';
  context.fillText ( 'bezierCurveTo(30,180,90,210,150,240);',10,45);  

BezierHart5

  var context = document.getElementById('BezierHart5').getContext('2d');
  context.addGrid(30);
  // the dots
  context.fillStyle = 'green';
  context.beginPath(); context.arc(150,240,3,0,2*Math.PI); context.fill();      // point 3    
  context.beginPath(); context.arc(270, 90,3,0,2*Math.PI); context.fill();      // point 4    
  // text 
  context.textBaseline = 'middle';
  context.textAlign = 'center';
  context.fillStyle = 'black';
  context.font = "12pt sans-serif";
  context.fillText ('3',150,255); 
  context.fillText ('4',285,90); 
  // 4.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(150,240); // point3
  context.lineTo(210,210); // cp7
  context.moveTo(270,90);// point4
  context.lineTo(270,180); // cp8
  context.stroke();  
  // 4.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (150,240); // point3
  context.bezierCurveTo (210,210,270,180,270,90); // cp7, cp8, point4 
  context.stroke();   
  // the command text
  context.fillStyle = 'black';
  context.font = "10pt monospace";
  context.textAlign = 'left';
  context.fillText ( 'bezierCurveTo(210,210,270,180,270,90);',3,45);  

BezierHart6

  var context = document.getElementById('BezierHart6').getContext('2d');
  context.addGrid(30);
  // the dots
  context.fillStyle = 'green';
  context.beginPath(); context.arc(270, 90,3,0,2*Math.PI); context.fill();      // point 4    
  context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill();      // point 5
  // text 
  context.textBaseline = 'middle';
  context.textAlign = 'center';
  context.fillStyle = 'black';
  context.font = "12pt sans-serif";
  context.fillText ('4',285,90); 
  context.fillText ('5',210,15);     
  // 5.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(270,90); // point4
  context.lineTo(270,60); // cp9
  context.moveTo(210,30);// point5
  context.lineTo(240,30); // cp10
  context.stroke();  
  // 5.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (270,90); // point4
  context.bezierCurveTo (270,60,240,30,210,30); // cp9, cp10, point5
  context.stroke();   
  // the command text
  context.fillStyle = 'black';
  context.font = "10pt monospace";
  context.textAlign = 'left';
  context.fillText ( 'bezierCurveTo(270,60,240,30,210,30);',10,165);  

BezierHart7

  var context = document.getElementById('BezierHart7').getContext('2d');
  context.addGrid(30);
  // the dots
  context.fillStyle = 'green';
  context.beginPath(); context.arc(150, 60,3,0,2*Math.PI); context.fill();      // point 0
  context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill();      // point 5
  // text 
  context.textBaseline = 'middle';
  context.textAlign = 'center';
  context.fillStyle = 'black';
  context.font = "12pt sans-serif";
  context.fillText ('0',150,75); 
  context.fillText ('5',210,15);     
  // 6.a) the tangents
  context.lineWidth = 2.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo(210,30); // point5
  context.lineTo(180,30); // cp11
  context.moveTo(150,60);// point0
  context.lineTo(150,30); // cp12
  context.stroke();  
  // 6.b) the red curve
  context.lineWidth = 1.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (210,30); // point5
  context.bezierCurveTo (180,30,150,30,150,60); // cp11, cp12, point0
  context.stroke();   
  // the command text
  context.fillStyle = 'black';
  context.font = "10pt monospace";
  context.textAlign = 'left';
  context.fillText ( 'bezierCurveTo(180,30,150,30,150,60);',10,165);  

ArcSample1

    var context = document.getElementById('ArcSample1').getContext('2d');
    context.fillStyle = "rgba(255,0,0,0.33)";    // red color with 1/3 transparency
    // now draw five filled circle pieces:
    context.beginPath(); context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); context.fill();    // 1st
    context.beginPath(); context.arc (180, 60, 50, 0,     Math.PI, false); context.fill();    // 2nd
    context.beginPath(); context.arc (300, 60, 50, 0,     Math.PI, true ); context.fill();    // 3rd
    context.beginPath(); context.arc (420, 60, 50, 2,           6, false); context.fill();    // 4th
    context.beginPath(); context.arc (540, 60, 50, 2,           6, true ); context.fill();    // 5th

ArcSample2

    var context = document.getElementById('ArcSample2').getContext('2d');
    context.strokeStyle = "rgba(255,0,0,0.33)";    // red color with 1/3 transparency
    // now draw five filled circle pieces:
    context.beginPath(); context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); context.stroke();    // 1st
    context.beginPath(); context.arc (180, 60, 50, 0,     Math.PI, false); context.stroke();    // 2nd
    context.beginPath(); context.arc (300, 60, 50, 0,     Math.PI, true ); context.stroke();    // 3rd
    context.beginPath(); context.arc (420, 60, 50, 2,           6, false); context.stroke();    // 4th
    context.beginPath(); context.arc (540, 60, 50, 2,           6, true ); context.stroke();    // 5th

ArcSample3

  var context = document.getElementById('ArcSample3').getContext('2d');
  context.addGrid (30);
  context.fillStyle = "rgba(255,0,0,0.33)";    // red color with 1/3 transparency
  // now draw five filled circle pieces:
  context.beginPath(); context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); context.fill();    // 1st
  context.beginPath(); context.arc (180, 60, 50, 0,     Math.PI, false); context.fill();    // 2nd
  context.beginPath(); context.arc (300, 60, 50, 0,     Math.PI, true ); context.fill();    // 3rd
  context.beginPath(); context.arc (420, 60, 50, 2,           6, false); context.fill();    // 4th
  context.beginPath(); context.arc (540, 60, 50, 2,           6, true ); context.fill();    // 5th
  // text
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '12pt sans-serif';
  context.fillText ('1st',  60, 130);
  context.fillText ('2nd', 180, 130);
  context.fillText ('3rd', 300, 130);
  context.fillText ('4th', 420, 130);
  context.fillText ('5th', 540, 130);
  // add the five center points:
  context.fillStyle = "red";
  context.beginPath(); context.arc ( 60, 60, 3, 0, 2 * Math.PI); context.fill();    // 1st
  context.beginPath(); context.arc (180, 60, 3, 0, 2 * Math.PI); context.fill();    // 2nd
  context.beginPath(); context.arc (300, 60, 3, 0, 2 * Math.PI); context.fill();    // 3rd
  context.beginPath(); context.arc (420, 60, 3, 0, 2 * Math.PI); context.fill();    // 4th
  context.beginPath(); context.arc (540, 60, 3, 0, 2 * Math.PI); context.fill();    // 5th

ArcExplained1

  var context = document.getElementById('ArcExplained1').getContext('2d');
  context.addGrid (20);
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.beginPath(); 
  context.arc ( 80, 80, 60, 0, 2 * Math.PI, false);
  context.fill();
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillText ('(x,y)', 80, 100);
  context.fillText ('r', 110, 70);
  context.fillText ('(x,y) = (80,80)  and  r = 60', 80, 12);
  context.fillStyle = "red";
  context.beginPath();
  context.arc ( 80, 80, 3, 0, 2 * Math.PI);
  context.fill();
  context.strokeStyle = "red";
  context.lineWidth = 3;
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (140, 80);
  context.stroke();

ArcExplained2

  var context = document.getElementById('ArcExplained2').getContext('2d');
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.beginPath(); 
  context.arc ( 80, 80, 60, 0, 2 * Math.PI, false); 
  context.fill();
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillText ('0', 150, 80);
  context.fillText ('a', 120, 140);
  context.fillStyle = "red";
  context.beginPath();
  context.arc ( 80, 80, 3, 0, 2 * Math.PI);
  context.fill();
  context.strokeStyle = "red";
  context.lineWidth = 3;
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (140, 80);
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(1) + 80, 60 * Math.sin(1) + 80);
  context.stroke();
  context.beginPath();
  context.arc (80, 80, 60, 0, 1);
  context.stroke();

ArcExplained3

  var context = document.getElementById('ArcExplained3').getContext('2d');
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.beginPath(); 
  context.arc ( 80, 80, 60, 0, 2 * Math.PI, false); 
  context.fill();
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillText ('0', 150, 80);
  context.fillText ('1r', 120, 140);
  context.fillText ('2r', 50, 145);
  context.fillText ('3r', 10, 90);
  context.fillText ('4r', 30, 30);
  context.fillText ('5r', 100, 15);
  context.fillText ('6r', 147, 60);
  context.strokeStyle = "red";
  context.lineWidth = 3;
  context.beginPath();
  context.arc (80, 80, 60, 0, 2 * Math.PI);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (140, 80);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(1) + 80, 60 * Math.sin(1) + 80);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(2) + 80, 60 * Math.sin(2) + 80);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(3) + 80, 60 * Math.sin(3) + 80);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(4) + 80, 60 * Math.sin(4) + 80);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(5) + 80, 60 * Math.sin(5) + 80);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(6) + 80, 60 * Math.sin(6) + 80);
  context.stroke();

ArcExplained4

  var context = document.getElementById('ArcExplained4').getContext('2d');
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.beginPath();
  context.arc ( 80, 80, 60, 0, 2*Math.PI, false);
  context.fill();
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillText ('2r', 50, 145);
  context.fillText ('6r', 147, 60);
  context.strokeStyle = "red";
  context.lineWidth = 3;
  context.beginPath();
  context.arc (80, 80, 60, 0, 2*Math.PI);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(2) + 80, 60 * Math.sin(2) + 80);
  context.stroke();
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos(6) + 80, 60 * Math.sin(6) + 80);
  context.stroke();

ArcExplained4filled

  var context = document.getElementById('ArcExplained4filled').getContext('2d');
  context.fillStyle = "rgba(255,0,0,0.33)";
  context.beginPath();
  context.arc ( 80, 80, 60, 2, 6, false);
  context.fill();
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillText ('arc() drawn with fill()', 80, 150);
  context.strokeStyle = "red";
  context.lineWidth = 3;

ArcExplained4stroke

  var context = document.getElementById('ArcExplained4stroke').getContext('2d');
  context.fillStyle = "rgba(255,0,0,0.33)";
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillText ('arc() drawn with stroke()', 80, 150);
  context.strokeStyle = "rgba(255,0,0,0.2)";
  context.lineWidth = 3;
  context.beginPath();
  context.arc (80, 80, 60, 2, 6);
  context.stroke();

ArcExplained5filled

  var context = document.getElementById('ArcExplained5filled').getContext('2d');
  context.fillStyle = "rgba(255,0,0,0.33)";
  context.beginPath();
  context.arc ( 80, 80, 60, 2, 6, true);
  context.fill();
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillText ('arc() drawn with fill()', 80, 20);

ArcExplained5stroke

  var context = document.getElementById('ArcExplained5stroke').getContext('2d');
  context.fillStyle = "rgba(255,0,0,0.33)";
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillText ('arc() drawn with stroke()', 80, 20);
  context.strokeStyle = "rgba(255,0,0,0.2)";
  context.lineWidth = 3;
  context.beginPath();
  context.arc (80, 80, 60, 2, 6, true);
  context.stroke();

ArcExplained6deg

  var context = document.getElementById('ArcExplained6deg').getContext('2d');
  // the half transparent disk
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.beginPath();
  context.arc ( 100, 80, 60, 0, 2 * Math.PI, false); 
  context.fill(); 
  // the angles
  context.strokeStyle = "red";
  context.lineWidth = 3;
  context.beginPath();
  context.arc (100, 80, 60, 0, 2 * Math.PI);
  context.moveTo (40, 80);
  context.lineTo (160, 80);
  context.moveTo (100, 20);
  context.lineTo (100, 140);    
  context.stroke();
  // text
  context.fillStyle = 'black';  
  context.font = '12pt sans-serif';
  context.fillText ('degree', 10, 12);  
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '6pt sans-serif';
  context.fillText ('0=360', 180, 80);
  context.fillText ('90', 100, 150);
  context.fillText ('180', 25, 80);
  context.fillText ('270', 100, 10);

ArcExplained6pi

  var context = document.getElementById('ArcExplained6pi').getContext('2d');
  // the half transparent disk
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.beginPath();
  context.arc ( 100, 80, 60, 0, 2 * Math.PI, false); 
  context.fill(); 
  // the angles
  context.strokeStyle = "red";
  context.lineWidth = 3;
  context.beginPath();
  context.arc (100, 80, 60, 0, 2 * Math.PI);
  context.moveTo (40, 80);
  context.lineTo (160, 80);
  context.moveTo (100, 20);
  context.lineTo (100, 140);    
  context.stroke();
  // text
  context.fillStyle = 'black';
  context.font = '12pt sans-serif';
  context.fillText ('radian', 10, 12);
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '6pt sans-serif';
  context.fillText ('0=2*Math.PI', 190, 80);
  context.fillText ('0.5*Math.PI', 100, 150);
  context.fillText ('Math.PI', 20, 80);
  context.fillText ('1.5*Math.PI', 100, 10);

ArcExplained7

  var context = document.getElementById('ArcExplained7').getContext('2d');
  context.addGrid (20);
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.beginPath(); 
  context.arc ( 80, 80, 60, 0, 2 * Math.PI, false); 
  context.fill(); 
  context.fillStyle = 'black';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '8pt sans-serif';
  context.fillStyle = "red";
  context.beginPath();
  context.arc ( 80, 80, 3, 0, 2 * Math.PI);
  context.fill();
  context.strokeStyle = "red";
  context.lineWidth = 3;
  context.beginPath();
  context.moveTo (80, 80);
  context.lineTo (140, 80);
  context.moveTo (80, 80);
  context.lineTo (60 * Math.cos (3/4 * Math.PI) + 80, 60 * Math.sin (3/4 * Math.PI) + 80);
  context.stroke();
  context.fillStyle = "black";
  context.beginPath();
  context.arc (60 * Math.cos (3/4 * Math.PI) + 80, 60 * Math.sin (3/4 * Math.PI) + 80, 3, 0, 2 * Math.PI);
  context.fill();

ArcWithInitLine

    var context = document.getElementById('ArcWithInitLine').getContext('2d');
    context.addGrid(30);
    context.lineWidth = 3.0;
    context.strokeStyle = "red";
    context.beginPath ();
    context.moveTo (30, 90);
    context.arc (210, 90, 60, 2, 6);
    context.lineTo (390, 90);
    context.stroke();  

ArcSample2again

  var context = document.getElementById('ArcSample2again').getContext('2d');
  context.strokeStyle = "rgba(255,0,0,0.33)";    // red color with 1/3 transparency
  // now draw five filled circle pieces:
  context.beginPath(); context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); context.stroke();    // 1st
  context.beginPath(); context.arc (180, 60, 50, 0,     Math.PI, false); context.stroke();    // 2nd
  context.beginPath(); context.arc (300, 60, 50, 0,     Math.PI, true ); context.stroke();    // 3rd
  context.beginPath(); context.arc (420, 60, 50, 2,           6, false); context.stroke();    // 4th
  context.beginPath(); context.arc (540, 60, 50, 2,           6, true ); context.stroke();    // 5th

ArcSample1singlePath

  var context = document.getElementById('ArcSample1singlePath').getContext('2d');
  context.strokeStyle = "rgba(255,0,0,0.33)";    // red color with 1/3 transparency
  context.beginPath(); 
  context.arc ( 60, 60, 50, 0, 2 * Math.PI, false);   // 1st
  context.arc (180, 60, 50, 0,     Math.PI, false);   // 2nd
  context.arc (300, 60, 50, 0,     Math.PI, true );   // 3rd
  context.arc (420, 60, 50, 2,           5, false);   // 4th
  context.arc (540, 60, 50, 2,           5, true );   // 5th
  context.stroke(); 

ArcSample00singlePath

  var context = document.getElementById('ArcSample00singlePath').getContext('2d');
  context.addGrid (30);
  context.fillStyle = "rgba(255,0,0,0.33)";
  context.beginPath(); 
  context.arc (120, 60, 50, 2, 5, true);
  context.fill(); 

ArcSample01singlePath

  var context = document.getElementById('ArcSample01singlePath').getContext('2d');
  context.addGrid (30);
  context.fillStyle = "rgba(255,0,0,0.33)";
  context.beginPath(); 
  context.moveTo (30,25);
  context.arc (120, 60, 50, 2, 5, true);
  context.lineTo (30,100);
  context.fill(); 

ArcSample02singlePath

  var context = document.getElementById('ArcSample02singlePath').getContext('2d');
  context.addGrid (30);
  context.lineWidth = 3.0;
  context.strokeStyle = "rgba(255,0,0,0.33)";
  context.beginPath(); 
  context.moveTo (30,25);
  context.arc (120, 60, 50, 2, 5, true);
  context.lineTo (30,100);
  context.stroke(); 

ArcToSample0

  var context = document.getElementById('ArcToSample0').getContext('2d');
  //context.addGrid(30);
  // draw the arc
  context.lineWidth = 5.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (60, 120);              // makes (x0,y0)=(60,120) the current point
  context.arcTo (150, 30, 240, 120, 50); // arcTo() with points (x1,y1)=(150,30) and (x2,y2)=(240,120) and radius 50
  context.stroke();

ArcToSample0points

  var context = document.getElementById('ArcToSample0points').getContext('2d');
  context.addGrid(30);
  // draw the points
  context.fillStyle = 'green';
  context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); 
  // text
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '16pt sans-serif';
  context.fillStyle = 'black';
  context.fillText ('0', 45, 105);
  context.fillText ('1', 150, 15);     
  context.fillText ('2', 255, 105);     

ArcToSample0lines

  var context = document.getElementById('ArcToSample0lines').getContext('2d');
  context.addGrid(30);
  // draw the points
  context.fillStyle = 'green';
  context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); 
  // draw the two tangents
  context.lineWidth = 1.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo (30,150);
  context.lineTo (150, 30);
  context.lineTo (270,150);
  context.stroke();
  // text
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '16pt sans-serif';
  context.fillStyle = 'black';
  context.fillText ('0', 45, 105);
  context.fillText ('1', 150, 15);     
  context.fillText ('2', 255, 105);     

ArcToSample0explained

  var context = document.getElementById('ArcToSample0explained').getContext('2d');
  context.addGrid(30);
  // draw the points
  context.fillStyle = 'green';
  context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); 
  // draw the two tangents
  context.lineWidth = 1.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo (30,150);
  context.lineTo (150, 30);
  context.lineTo (270,150);
  context.stroke();
  // text
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '16pt sans-serif';
  context.fillStyle = 'black';
  context.fillText ('0', 45, 105);
  context.fillText ('1', 150, 15);     
  context.fillText ('2', 255, 105);     
  // draw the arc
  context.lineWidth = 5.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (60, 120);
  context.arcTo (150, 30, 240, 120, 50);
  context.stroke();

ArcToSample0Radius50

  var context = document.getElementById('ArcToSample0Radius50').getContext('2d');
  //context.addGrid(30);
  // draw the points
  context.fillStyle = 'green';
  context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); 
  // draw the two tangents
  context.lineWidth = 1.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo (30,150);
  context.lineTo (150, 30);
  context.lineTo (270,150);
  context.stroke();
  // text
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '16pt sans-serif';
  context.fillStyle = 'black';
  context.fillText ('0', 45, 105);
  context.fillText ('1', 150, 15);     
  context.fillText ('2', 255, 105);     
  context.textAlign = 'left';
  context.font = '10pt sans-serif';
  context.fillText ('radius = 50', 10, 15);     
  // draw the arc
  context.lineWidth = 5.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (60, 120);
  context.arcTo (150, 30, 240, 120, 50);
  context.stroke();

ArcToSample0Radius20

  var context = document.getElementById('ArcToSample0Radius20').getContext('2d');
  //context.addGrid(30);
  // draw the points
  context.fillStyle = 'green';
  context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); 
  // draw the two tangents
  context.lineWidth = 1.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo (30,150);
  context.lineTo (150, 30);
  context.lineTo (270,150);
  context.stroke();
  // text
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '16pt sans-serif';
  context.fillStyle = 'black';
  context.fillText ('0', 45, 105);
  context.fillText ('1', 150, 15);     
  context.fillText ('2', 255, 105);     
  context.textAlign = 'left';
  context.font = '10pt sans-serif';
  context.fillText ('radius = 20', 10, 15);     
  // draw the arc
  context.lineWidth = 5.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (60, 120);
  context.arcTo (150, 30, 240, 120, 20);
  context.stroke();

ArcToSample0Radius150

  var context = document.getElementById('ArcToSample0Radius150').getContext('2d');
  //context.addGrid(30);
  // draw the points
  context.fillStyle = 'green';
  context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); 
  // draw the two tangents
  context.lineWidth = 1.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo (30,150);
  context.lineTo (150, 30);
  context.lineTo (270,150);
  context.stroke();
  // text
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '16pt sans-serif';
  context.fillStyle = 'black';
  context.fillText ('0', 45, 105);
  context.fillText ('1', 150, 15);     
  context.fillText ('2', 255, 105);     
  context.textAlign = 'left';
  context.font = '10pt sans-serif';
  context.fillText ('radius = 150', 10, 15);     
  // draw the arc
  context.lineWidth = 5.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (60, 120);
  context.arcTo (150, 30, 240, 120, 150);
  context.stroke();

ArcToSample0Radius250

  var context = document.getElementById('ArcToSample0Radius250').getContext('2d');
  //context.addGrid(30);
  // draw the points
  context.fillStyle = 'green';
  context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); 
  context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); 
  // draw the two tangents
  context.lineWidth = 1.0;
  context.strokeStyle = 'green';
  context.beginPath();
  context.moveTo (30,150);
  context.lineTo (150, 30);
  context.lineTo (270,150);
  context.stroke();
  // text
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.font = '16pt sans-serif';
  context.fillStyle = 'black';
  context.fillText ('0', 45, 105);
  context.fillText ('1', 150, 15);     
  context.fillText ('2', 255, 105);     
  context.textAlign = 'left';
  context.font = '10pt sans-serif';
  context.fillText ('radius = 250', 10, 15);     
  // draw the arc
  context.lineWidth = 5.0;
  context.strokeStyle = 'red';
  context.beginPath();
  context.moveTo (60, 120);
  context.arcTo (150, 30, 240, 120, 250);
  context.stroke();

ClipSample1a

  var context = document.getElementById('ClipSample1a').getContext('2d');
  context.addGrid(30);
  // draw a rectangle with text
  context.fillStyle = 'aqua';
  context.fillRect (30, 60, 180, 60);
  context.fillStyle = 'red';
  context.font = '60px sans-serif';
  context.fillText ('Hello!', 30, 110);

ClipSample1b

  var context = document.getElementById('ClipSample1b').getContext('2d');
  context.addGrid(30);
  // clipped circle area
  context.fillStyle = 'yellow';
  context.beginPath();
  context.arc (60, 60, 60, 0, 2*Math.PI);
  context.fill();

ClipSample1

  var context = document.getElementById('ClipSample1').getContext('2d');
  context.addGrid(30);
  // 1. clipped circle area
  context.fillStyle = 'yellow';
  context.beginPath();
  context.arc (60, 60, 60, 0, 2*Math.PI);
  context.fill();
  // 2. clip
  context.clip();
  // 3. draw a rectangle with text
  context.fillStyle = 'aqua';
  context.fillRect (30, 60, 180, 60);
  context.fillStyle = 'red';
  context.font = '60px sans-serif';
  context.fillText ('Hello!', 30, 110);

ClipSample2

  var context = document.getElementById('ClipSample2').getContext('2d');
  context.addGrid(30);
  context.lineWidth = 3.0;
  // clipped circle area
  context.strokeStyle = 'yellow';
  context.beginPath();
  context.arc (60, 60, 60, 0, 2*Math.PI);
  context.stroke();
  // clip
  context.clip();
  // draw a rectangle with text
  context.strokeStyle = 'aqua';
  context.strokeRect (30, 60, 180, 60);
  context.strokeStyle = 'red';
  context.font = '60px sans-serif';
  context.strokeText ('Hello!', 30, 110);

ClipSample3

  var context = document.getElementById('ClipSample3').getContext('2d');
  context.addGrid(30);
  // clipped circle area
  context.beginPath();
  context.arc (60, 60, 60, 0, 2*Math.PI);
  context.fill();
  // clip
  context.clip();
  // insert the image
  var image = new Image();
  image.src = "horse.jpg";
  context.drawImage (image, 0, 0, 120, 120);  

IsPointInPathSample1

  var context = document.getElementById('IsPointInPathSample1').getContext('2d');
  context.addGrid();
  // add a new path
  context.beginPath();
  context.moveTo (75,130);                // make (75,130) the current point
  context.lineTo (145,75);                // line from (75,130) to (145,75)
  context.arc (75,75,70,0,Math.PI,true);  // draw half circle disk with center (75,75), radius 70 and counterclockwise
  context.lineTo (75,130);                // line from (5,70) to (75,130)
  context.lineWidth = 3.0;                // set the line width for the stroke drawing
  context.strokeStyle = 'purple';         // set the line color for the stroke drawing
  context.stroke();                       // draw the shape
  // determine the position of two points
  var answer1 = context.isPointInPath (25,100);    // answer1 is now either true or false
  var answer2 = context.isPointInPath (100,25);    // answer2 is also either true or false
  // print out the result on the canvas    
  context.font = "14pt sans-serif";                                        // set the font for the text
  context.fillText ( "isPointInPath(25,100)  is  " + answer1, 200, 50);    // print the first line of text
  context.fillText ( "isPointInPath(100,25)  is  " + answer2, 200, 100);   // print the second line of text

TextSample0

  var canvas = document.getElementById ('TextSample0');
  var context = canvas.getContext ('2d');
  context.addGrid (20);
  // set both the strokeStyle and the fillStyle to black
  context.strokeStyle = 'black';
  context.fillStyle = 'black';
  // first line of text in the default font:
  context.strokeText(context.font, 10, 20);  
  context.fillText (context.font, 350, 20);
  // second line of text:
  context.font = '20px fantasy';
  context.strokeText(context.font, 10, 40);  
  context.fillText (context.font, 350, 40);
  // third line of text:
  context.font = '40px Verdana';
  context.strokeText(context.font, 10, 80);  
  context.fillText (context.font, 350, 80);
  // fourth line of text:
  context.font = '60px Arial';
  context.strokeText(context.font, 10, 140);  
  context.fillText (context.font, 350, 140); 

TextAlignLeftSample

    var canvas = document.getElementById('TextAlignLeftSample');
    var context = canvas.getContext('2d');
    context.addGrid (20)
    context.font = '20px monospace';
    context.textAlign = 'left';
    context.fillText ("Hello world!", 300, 30);

TextAlignRightSample

    var canvas = document.getElementById('TextAlignRightSample');
    var context = canvas.getContext('2d');
    context.addGrid (20)
    context.font = '20px monospace';
    context.textAlign = 'right';
    context.fillText ("Hello world!", 300, 30);

TextAlignCenterSample

    var canvas = document.getElementById('TextAlignCenterSample');
    var context = canvas.getContext('2d');
    context.addGrid (20)
    context.font = '20px monospace';
    context.textAlign = 'center';
    context.fillText ("Hello world!", 300, 30);

TextBaselineSample

  var context = document.getElementById('TextBaselineSample').getContext('2d');
  context.addGrid (50);
  context.font = '20px monospace';  
  context.textBaseline = 'top';          context.fillText ( "top",         0,   50);
  context.textBaseline = 'hanging';      context.fillText ( "hanging",     100, 50);
  context.textBaseline = 'middle';       context.fillText ( "middle",      200, 50);
  context.textBaseline = 'alphabetic';   context.fillText ( "alphabetic",  300, 50);
  context.textBaseline = 'ideographic';  context.fillText ( "ideographic", 450, 50);
  context.textBaseline = 'bottom';       context.fillText ( "bottom",      600, 50);  

FillTextSample

    var context = document.getElementById('FillTextSample').getContext('2d');
    context.addGrid (50);
    context.fillStyle = 'black';         // explicitly sets the text color to (default) 'black'
    context.font = '50px monospace';
    context.fillText ("Hello world!", 0, 50);  
    context.fillText ("This is a longer string that is limited to 750 pixel.", 0, 100, 750);  
    context.fillText ("This is a longer string that is limited to 300 pixel.", 0, 150, 300);  

StrokeTextSample

    var context = document.getElementById('StrokeTextSample').getContext('2d');
    context.addGrid (50);
    context.strokeStyle = 'black';        // explicitly sets the text color to (default) 'black'
    context.lineWidth = 2.0;              // double of the default lineWidth
    context.font = '50px monospace';
    context.strokeText ("Hello world!", 0, 50);  
    context.strokeText ("This is a longer string that is limited to 750 pixel.", 0, 100, 750);  

TextSampleMeasureText

  var canvas = document.getElementById('TextSampleMeasureText');
  var context = canvas.getContext('2d');
  context.addGrid (30);
  var text = "This is some text.";
  context.font = '30px Arial'; 
  context.fillText (text, 0, 30);
  var w = context.measureText(text).width;
  context.fillText ("The previous line is " + w + " pixel wide.", 0, 60);

DrawImageSample1

  var canvas = document.getElementById('DrawImageSample1');
  var context = canvas.getContext('2d');
  context.addGrid (50, 'blue', '12px Arial');
  var image = new Image();
  image.src = "horse.jpg";
  context.drawImage (image, 50, 50);

DrawImageSample2

  var canvas = document.getElementById('DrawImageSample2');
  var context = canvas.getContext('2d');
  context.addGrid ( 50, 'blue', '12px Arial');
  var image = new Image();
  image.src = "horse.jpg";
  context.drawImage (image, 50, 50, 600, 150);
  context.drawImage (image, 50, 250, 150, 200);
  context.drawImage (image, 350, 250, 100, 200);
  context.drawImage (image, 600, 250, 50, 200);

DrawImageSample3

  var canvas = document.getElementById ('DrawImageSample3');
  var context = canvas.getContext ('2d');  
  context.addGrid ();
  var image = new Image();
  image.src = "horse.jpg";
  context.drawImage (image, 150, 40, 130, 120, 75, 100, 200, 150);

DrawImageSample3image

  var canvas = document.getElementById('DrawImageSample3image');
  var context = canvas.getContext('2d');
  context.addGrid ();
  var image = new Image();
  image.src = "horse.jpg";
  context.drawImage (image, 0, 0);  
  context.font = '14px sans-serif';     
  context.strokeStyle = 'red';
  context.lineWidth = 5;
  context.strokeRect(150,40,130,120);
  context.lineWidth = 1.4;
  context.strokeText ('sh=120', 85, 100);
  context.strokeText ('sw=130', 180, 175);  
  context.strokeStyle = 'orange';
  context.lineWidth = 2;
  context.beginPath();
  context.moveTo(150,0);
  context.lineTo(150,40);
  context.moveTo(0,40);
  context.lineTo(150,40);
  context.stroke();  
  context.lineWidth = 1.4;
  context.strokeText ('sy=40', 155, 25);
  context.strokeText ('sx=150', 60, 60);

DrawImageSample3canvas

  var canvas = document.getElementById('DrawImageSample3canvas');
  var context = canvas.getContext('2d');
  context.addGrid ();
  context.font = '14px sans-serif';     
  context.strokeStyle = 'orange';
  context.lineWidth = 2;
  context.beginPath();
  context.moveTo(75,0);
  context.lineTo(75,100);
  context.moveTo(0,100);
  context.lineTo(75,100);
  context.stroke();  
  context.lineWidth = 1.4;
  context.strokeText ('dx=75', 10, 115);
  context.strokeText ('dy=100', 80, 50);
  context.strokeStyle = 'red';
  context.lineWidth = 5;
  context.strokeStyle = 'red';
  context.lineWidth = 5;
  context.strokeRect(75,100,200,150);
  context.lineWidth = 1.4;
  context.strokeText ('dw=200', 150, 270);  
  context.strokeText ('dh=150', 10, 175);

ImageDataSample

      var canvas = document.getElementById('ImageDataSample');
      var w = canvas.width;          // w is 256
      var h = canvas.height;         // h is 256
      var context = canvas.getContext('2d');
      context.addGrid(32);           // see the appendix for this non-standard addGrid() method
      var imDat = context.createImageData (w,h);
      var i = 0;
      for (var y = 0; y < h; y++) {
        for (var x = 0; x < w; x++) {
          imDat.data[i++] = x;        // the Red component of (x,y), which is set to x
          imDat.data[i++] = y;        // the Green component of (x,y), which is set to y
          imDat.data[i++] = 0;        // the Blue component of (x,y), which is constant 0
          imDat.data[i++] = 255;      // the Alpha/transparency of (x,y), which is constant 255, i.e. fully visible
        };
      };
     context.putImageData (imDat, 0, 0)

ImageDataSampleAgain

  var context = document.getElementById('ImageDataSampleAgain').getContext('2d');
  context.addGrid(32);
  context.drawImage(document.getElementById('ImageDataSample'),0,0);

GetImageDataSample1a

    var context = document.getElementById('GetImageDataSample1a').getContext('2d');
    context.addGrid(20);  
    // generate the text line
    context.fillStyle = 'black';
    context.font = '40pt sans-serif';
    context.fillText ('Hi there!',30,70);   

GetImageDataSample1b

    var context = document.getElementById('GetImageDataSample1b').getContext('2d');
    context.addGrid(20);  
    // generate the text line
    context.fillStyle = 'black';
    context.font = '40pt sans-serif';
    context.fillText ('Hi there!',30,70);   
    // cut out an ImageData and copy it into the canvas again
    var imDat = context.getImageData (20,20,260,60);  
    context.putImageData (imDat,320,20);     
    // the red lines
    context.strokeStyle = 'red';  
    context.lineWidth = 3.0;
    context.strokeRect (20,20,260,60);
    context.strokeRect (320,20,260,60);  

GetImageDataSample1c

    var context = document.getElementById('GetImageDataSample1c').getContext('2d');
    context.addGrid(20);  
    // generate the text field
    context.fillStyle = 'black';
    context.font = '40pt sans-serif';
    context.fillText ('Hi there!',30,70);   
    // cut out an ImageData and copy it into the canvas again
    var imDat = context.getImageData (20,20,260,60);  
    context.putImageData (imDat,320,20);     

GetImageDataSample2

    var context = document.getElementById('GetImageDataSample2').getContext('2d');
    context.addGrid(20);
    // 0. Generated the text field
    context.fillStyle = 'black';
    context.font = '40pt sans-serif';
    context.fillText ('Hi there!',30,70);     
    // 1. Cut out the ImageData object named imDat
    var w = 260;                                     // explicitly define the width w of the rectangle area
    var h = 60;                                      // explicitly define the height h of the rectangle 
    var imDat = context.getImageData(20,20,w,h);     // cut out the rectangle and save it in an ImageData object named imDat
    // 2. Create a new ImageDate object with the mirror image, called mirImDat 
    var mirImDat = context.createImageData(imDat);   // initialze mirImDat; all components of mirImDat.data are 0
    for (var y = 0; y < h; y++) {
      for (var x = 0; x < w; x++) {
        var d = 4 * (y * w + x);
        var s = 4 * (y * w + (w - (x + 1)));
        mirImDat.data [d + 0] = imDat.data [s + 0];
        mirImDat.data [d + 1] = imDat.data [s + 1];
        mirImDat.data [d + 2] = imDat.data [s + 2];
        mirImDat.data [d + 3] = imDat.data [s + 3];
      };                                              // done updating the mirImDat.data components
    };
    // 3. Insert the mirImDat into the image again
    context.putImageData (mirImDat,320,20);   

AddGridSample1

  document.getElementById('AddGridSample1').getContext('2d').addGrid();

AddGridSample2

  document.getElementById('AddGridSample2').getContext('2d').addGrid(50,'red');

AddGridSample3

  document.getElementById('AddGridSample3').getContext('2d').addGrid(20,'black','5px sans-serif');

allCanvasDrawings() --- end of the function

  }; // end of function allCanvasDrawings()

allCanvasDrawings is called when the document is loaded

  window.onload = allCanvasDrawings;