Here are some ready made functions that you can use.
Rectangle ......... .... "TryoutPanel1"
<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>
Circle......... .... "TryoutPanel2"
<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>
Drawing a Picture with shapes......... .... "TryoutPanel3"
<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>
You can draw lines on Canvas. Try it out in the Tryout Panel below.
Drawing Lines ......... .... "TryoutPanel4"
<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>
Canvas also lets you render images. Try it out in the Tryout Panel below.
Draw an Image......... .... "TryoutPanel5"
<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>