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
putImageDatamethods 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:
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
heightat 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.
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  y 1  ←Pixel array numbers ↓ 2  (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.widthis the canvas width. If
4jumps the four elements (RGBA) of each pixel.
In the above four by three grid
c.widthis four. So using the above equation, pixel (1,2) has
yas 2 and
iwill 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
tin the source code that varies in the range [0,1] (so 0.5 is mid-range like 50%).