<script>

var canvas;
var context;



function rect(x,y,rectWidth,rectHeight) {   //function creates rectangle
  context.beginPath();
  context.rect(x,y,rectWidth,rectHeight);
    context.fill();
    context.stroke();
}


//////////////////////////////////////////////////////////

function draw() {
   canvas = document.getElementById('canvas');     //gets canvas
   context = canvas.getContext('2d');              //gets context object
   
  context.strokeStyle = "green";             // line color
  context.fillStyle = "yellow";              // filling color
 
  rect(20,20,200,80);                   // rect(x,y,width,height);

}

setTimeout(draw,50);                 // call draw function
                                     // setTimeout to allow canvas to load
                                     // in the frame
</script>

<canvas id="canvas" width="350" height="200" style="border:1px solid #d3d3d3;">
</canvas>

<ul>
<li>change the colors(22)</li>
<li>change the rectangle's coordinates and width and height(25)</li>
</ul>

<script>

var canvas;
var context;

function circle(x,y,radius) {                  //  circle 
context.beginPath();
context.arc(x, y, radius,0, Math.PI*2, true);
context.fill();
context.stroke(); }




//////////////////////////////////////////////////////////

function draw() {
   canvas = document.getElementById('canvas');     //gets canvas
   context = canvas.getContext('2d');              //gets context object
   
  context.strokeStyle = "purple";                // line color
  context.fillStyle = "orange";                 // filling color
 
  circle(100,80,50);                        // circle(x,y,radius);
     //.......make several circles:change x,y-coords for each.
}

setTimeout(draw,50);                 // call draw function
                                     // setTimeout to allow canvas to load
                                     // in the frame
</script>

<canvas id="canvas" width="350" height="200" style="border:1px solid #d3d3d3;">
</canvas>

<ul>
<li>make more circles in different positions (25)</li>
</ul>

<script>

var canvas;
var context;



function rect(x,y,rectWidth,rectHeight) {   //function creates rectangle
  context.beginPath();
  context.rect(x,y,rectWidth,rectHeight);
    context.fill();
    context.stroke();
}

function circle(x,y,radius) {               //function creates circle
  context.beginPath();
  context.arc(x, y, radius,0, Math.PI*2, true);
  context.fill();
  context.stroke();
}



function triangle(x,y,dist2x,dist2y,dist3x,dist3y){     // triangle
context.beginPath();
    context.moveTo(x,y);
    context.lineTo(x+dist2x,y+dist2y);
    context.lineTo(x+dist3x,y+dist3y);
    context.closePath();
     context.fill();
    context.stroke();
   }

function oval( x, y, widthOval, heightOval){             //oval
       context.save(); // save state
        context.beginPath();
        context.translate(x - widthOval, y - heightOval);
        context.scale(widthOval, heightOval);
        context.arc(1, 1, 1, 0, 2 * Math.PI, false);
        context.restore(); // restore to original state
        context.fill();
         context.stroke();
     }



////////////////// DRAW ////////////////////////////////

function draw() {
   canvas = document.getElementById('canvas');     //gets canvas
   context = canvas.getContext('2d');              //gets context object

     
 context.strokeStyle = "green";                // line colors
 context.fillStyle = "yellow";                 // filling color
 circle(100, 100, 80);                         //circle(x,y,radius);


 context.fillStyle = "#0000FF";
 rect(60,60,20,20);                            // rect(x,y,width,height);
 rect(120,60,20,20);
     
 context.fillStyle = "red";  
 oval( 100, 120, 30, 10);                     // oval(x,y,width,height)

 context.fillStyle = "green";
 triangle(95,180,-95,50,95,50);     //triangle(x,y,dist2x,dist2y,dist3x,dist3y)

}

setTimeout(draw,50);                     // call draw function
                                       // setTimeout to allow canvas to load
</script>

<canvas id="canvas" width="500" height="250" style="border:1px solid #d3d3d3;">
</canvas>
<p>
make your own drawing with simple shapes
<ul><li>copy and paste the <b>rect()</b>,<b>circle()</b>,<b>oval()</b> and <b>triangle()</b> 
functions to add more shapes</li>
<li>Make sure to change their x,y coords</li>
<li>change colors by pasting <b>context.fillStyle</b> before your new shape(55)</li></ul>
</p>

<script>

function draw(){
var canvas=document.getElementById("myCanvas");      // get canvas
var context=canvas.getContext("2d");                 // get context

context.moveTo(0,0);                                 // start new line
context.lineTo(200,100);                             // next point on line
context.lineTo(20,80);
 //........add more lineTo to make line longer,change x,y
context.stroke();                                    // draw the line
}

setTimeout(draw,50);;

</script>

<canvas id="myCanvas" width="400" height="200" style="border:1px solid lightBlue;">
</canvas>
<ul><li>Change line coords in lineTo.(8)</li>
<li>Add more lineTo to make line longer(10)</li></ul>

<script>

var img= new Image();                           //create new image
img.src="/pics/chicks.jpg"

function draw(){
var canvas=document.getElementById("myCanvas");      // get canvas
var context=canvas.getContext("2d");                 // get context

context.drawImage(img,0,0);                          // draw image                                 
}

setTimeout(draw,100);

</script>

<canvas id="myCanvas" width="250" height="200" style="border:1px solid lightBlue;">
</canvas>
<ul><li>change the picture: right-click any pic on the internet and <b>copy URL</b> </li>
<li>paste the URL in <b>img.src</b>(4)</li></ul>

<script>

function draw(){
var canvas=document.getElementById("myCanvas");      // get canvas
var context=canvas.getContext("2d");                 // get context


context.font="40px Georgia";
context.fillText("Hello!",10,50);                // filling
context.strokeText("Goodbye!",10,100);           // stroking
                          
}

setTimeout(draw,50);

</script>


<canvas id="myCanvas" width="250" height="150" style="border:1px solid lightBlue;">
</canvas>