Wait/Loading Animation

Canvas
Site Map Feedback

Tutorial:

←Previous Index Next→
Up Button Noise Wait Wall

This first tutorial is probably the most difficult to understand because nothing can be demonstrated without understanding how to draw to a web page. Once you play with the source code for this page things will become clearer.

If this first page seems overwhelming, use the [Next] button on the left (and at the bottom of each page) to check out the cool stuff that happens and see how the other pages are short and simple, then come back to get the gounding you need to play.

To draw on a Web Browser, an HTML5 Canvas element is used which (apart from clearing the background) is all done by writing individual pixels using the getImageData and putImageData methods of the canvas' context.

It's less complex than it sounds - the Canvas element is just a name, width and height specified in the web page text (HTML). Its pixel block is accessed and returned as an array (described in a moment).

This is a canvas shaded with a simple gradient:
The following picture is drawn, it is not a downloaded HTML image: This browser doesn't support the canvas element :-(

The whole point of the code is to come up with a 'parameter', a floating point number, culturally named t, for each pixel in the canvas, which defines how to draw that pixel in some way.

On the canvas, x is zero at the left and increases to the right up to width; y is zero at the top increasing downwards (yes, really) to height at the bottom. This is the opposite of how a graph is drawn (cartesian coordinates) but it's the same method you're using to read this text: start at the top left, scan across x, then when you reach the end, you're on the next line: y increasing (the number of lines you've read) downwards.

Since all this is done in javascript within the HTML text of this web-page, you can view the code that makes up this file from your browser. For example, most browsers on Windows have a [View Source] menu entry if you right-click this web-page. You can then copy and paste the canvas and script block to an HTML file of your own. Since the source for this particular page has a lot of text, it is easier to paste the following code into a file, save it as shade.htm and edit it to play with the possibilities. 

<!DOCTYPE html>
<html>
<body>
  <canvas id="Drawing" width="50" height="50">This browser doesn't support the canvas element :-(</canvas>
  <script type="text/javascript">
    var c=document.getElementById("Drawing");
    var ctx=c.getContext("2d");
    var imgData=ctx.getImageData(0,0,c.width,c.height);
    for(var y=c.height; y--;) {
      var t=y/c.height;          // t varies in the range [0,1]. 0 will be black, 1 will be white.
      for(var x=c.width; x--;) {
        var i=4*(c.width*y+x);   // locate the point (x,y) in the imgData array
        imgData.data[i+0]=255*t; // Red scaled up to byte size varying between [0,255]
        imgData.data[i+1]=255*t; // Green
        imgData.data[i+2]=255*t; // Blue
        imgData.data[i+3]=255;   // Alpha (Opaque) = Overwrite the screen data
    } }
    ctx.putImageData(imgData,0,0);
  </script>
</body>
</html>
Once you have this code saved as a .htm file you can make changes and resave, then drag and drop (or open) the file on your browser to see those changes in action.

If you use an editor like the freeware Notepad++ you can load the file into the browser from the editor menus [Run][Launch in Chrome] for example.

Each pixel in the array has four elements: RGBA = Red,Green,Blue and Alpha (Transparency) that vary in the range [0,255] (they are byte values: integers from 0 to 255 inclusive). Alpha will always be 255 (Opaque) in these tutorials because transparency is handled by the code before the pixel data is written. The first pixel is at array index zero, the next is at index four then eight and so on. A three by four pixel block has x coordinates in the range [0,3] and y coordinates in the range [0,2] as shown: 

Coordinates of a pixel block:
            x→
      0   1   2   3 (four pixels across)
  0 [00][04][08][12]
y 1 [16][20][24][28] ←Pixel array numbers
↓ 2 [32][36][40][44]
(three pixels down)
The array indices are written in square brackets for each pixel.(x,y) coordinates are converted to an array index using this line of code: 
var i=4*(c.width*y+x); // locate the point (x,y) in the imgData array
c.width is the canvas width. If y is zero i is 4*x. The 4 jumps the four elements (RGBA) of each pixel.

In the above four by three grid c.width is four. So using the above equation, pixel (1,2) has x as 1, y as 2 and i will be 4*(c.width*y+x) which is 4*(4*2+1) = 4*(9) = 36 which you can find in the above diagram.

The Red, Green and Blue values will be all set to the same values to start with showing shades of grey. R=G=B=0 is black and R=G=B=255 is white.

The next tutorial will demonstrate ways to play with the gradient by manipulating an Unsigned Unit Interval: the variable t in the source code that varies in the range [0,1] (so 0.5 is mid-range like 50%).