Added by on 2013-04-10

In this video lesson series you can learn all about how to draw into the HTML5 canvas tag using Javascript. The canvas tag is aptly named. It supplies you with a means of drawing things through script and it renders in a browser. Things can be stationary or animated inside of a canvas tag. We can use Javascript to draw what we want in the canvas so in this series we will demonstrate some of the drawing methods one can use. We will also demonstrate how to animate things inside of the canvas tag using Javascript.


window.onload = draw; // Execute draw function when DOM is ready
function draw() {
     // Assign our canvas element to a variable 
    var canvas = document.getElementById("canvas1");
    // Create the HTML5 context object to enable draw methods
    var ctx = canvas.getContext("2d"); 
    //fillStyle (r, g, b, alpha);
    ctx.fillStyle = "rgba(0,200,0,1)";
    //fillRect (X, Y, width, height); 
    ctx.fillRect (36, 10, 22, 22);




Leave a Reply

Your email address will not be published. Required fields are marked *