Drawing 1

More info about Canvas drawing commands at:
W3schols
Canvas Tutor

== Instructions ==

This page demonstrates some standard HTML 5 Canvas drawing commands.
The basic concept works like this:

-- create a CANVAS box to draw into
make("canvas;id=box;left:50px;top:100px;width=100;height=100");

-- get a "handle" to point at a box where you will be drawing

  var ctx = document.getElementById("box").getContext("2d");

-- use the "handle" at the beginning of each drawing command

 
      ctx.beginPath();                
      // start the shape

        ctx.lineWidth =
      5;              
      // line thickness

        ctx.strokeStyle =
      "red";         // line color

        ctx.arc(50,50,35,0,2*Math.PI);   // draw a circle

        ctx.stroke();              
           // put the shape in the box

-- use a different "handle" to draw in a different box

  var ct2 = document.getElementById("box2").getContext("2d");

== Today's Practice ==
(0) Download this folder. Use DRAWING1.HTML as a starting point.

(1) Add another CANVAS box. Put it at the right of the 2 existing boxes,
      so there are 3 boxes in one line. Give it a pale green background.
      Then draw a big + plus sign in the box, by adding more commands
      inside the draw.onclick function. The + plus sign should be green.

(2) Add another row of 3 boxes below the first row.
     Give each box a different color. Make the boxes size 100x100 .
     Then DRAW the letters A , M , and V in the boxes.

(3) Add another button called SWITCH. When this is clicked,
      it should perform 6 SLIDE commands that exchange
      the first row of boxes with the second row -
      so the top boxes move down and the bottom boxes move up.

(4) Add a BIG box below the second row.
      In this box, you must draw 3 circles next to each other, just touching,
      like this : OOO (but bigger).