HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using Javascript




Lesson Code: http://www.developphp.com/video/HTML/Canvas-Draw-Function-Set-Up
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.

Original source


21 responses to “HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using Javascript”

  1. canvas element will not show on my chrome(I reinstalled and updated it to latest version so definitely its not browser issue).
    Here's my code. Please help I have been stuck for hours. I don't know what i'm doing wrong.

    <html>
    <head>
    <script type = "text/javascript">
    window.onload = draw;
    function draw(){
    var canvas = document.getElementbyId('gamecanvas');
    var canvascontext = canvas.getContext("2d");
    canvascontext.fillStyle = 'black';
    canvascontext.fillRect(36,10,22,12);
    }
    </script>
    </head>
    <body>
    <canvas id = "gamecanvas" width = "400" height = "300">
    </canvas>
    </body>
    </html>

  2. This is exactly what I was looking for. I was thinking of making a program that randomly turns OFF pixels in a square array (pixels or squares made up of X pixels) but wasn't sure how to connect the pure coding of it to the graphical part. Been over 10 years since I did anything with javascript. So, now, just replace the hard coded coord with variables with multiplier constants for the offsets and it should work.

  3. hi, i write exact your code but its show me black box in firefox and green on chrome what's going wrong… here is the code…
    // Assign our canvas element to variable
    var canvas = document.getElementById("canvas");
    // 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