Kids

Can

JavaScript

<-----Back        Next --->

Drawing with Canvas

In JavaScript we draw on the Canvas
Below is a drawing made with shapes-functions.

example1:

Shapes Functions

To draw shapes we use functions.


 rect 
 ( 
 x 
 , 
 y 
 , 
 rectWidth 
 , 
 rectHeight 
 ) 
 ; 


 circle 
 ( 
 x 
 , 
 y 
 , 
 radius 
 ) 
 ; 


 triangle 
 ( 
 x 
 , 
 y 
 , 
 dist2x 
 , 
 dist2y 
 , 
 dist3x 
 , 
 dist3y 
 ) 
 ; 


 oval 
 ( 
 x 
 , 
 y 
 , 
 widthOval 
 , 
 heightOval 
 ) 
 ; 

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>





Lines

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>





Images

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>





Text

You can write text on the Canvas. Try it out:

Text on Canvas......... .... "TryoutPanel6"
<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>





Canvas and Context

HTML has a <canvas>-tag to draw on. The default size = 300 px * 150 px . That can be changed.

 <canvas 
 id="myCanvas" 
 > 
 </canvas> 

The <canvas> tag can't do anything by itself. It uses a context-object for all its drawing methods and properties.

 canvas 
 = 
 document.getElementById( 
 'myCanvas' 
 ) 
 ; 


 context 
 = 
 canvas 
 .getContext('2d') 
 ; 


 context 
 . 
 fillStyle 
 = 
 " 
 yellow 
 " 
 ; 

<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email