Browsers supporting HTML5 allow you to draw on the browser’s screen without preparing an image file before. Drawing on a canvas is done using the wonderful Javascript language. If you want to draw a 2-dimensional image on canvas element ‘cnv’, get the drawing context using:

var ctx = cnv.getContext("2d")

And use that context to draw everything using the standard functions:

moveTo, lineTo, arc, fillRect, etc.

Learn more about drawing here.

You can use the functions to create more complicated shapes easily thanks to transform functions:

## Transformations: Linear Algebra Made Easy

The origin(0,0) of the canvas is defined to be the top-left pixel of the canvas element. And the coordinates are given in number of pixels. This can change by using transforms.

The transformation functions are:

- scale(x,y): this will make every shape x times wider and y time taller.
- translate(x,y): now coordinate (0,0) will be shifted x units to the right, and y units down.
- rotate(angle): will rotete the axes by given angle in radians.
- transform(a,b,c,d,e,f): If you want to use a transformation matrix
- setTransfrom(a,b,c,d,e,f): reset all transform, and perform transform(a,b,c,d,e,f).

a,b,c,d,e,f are values in the matrix:

The values a,b,c,d are used for rotating and scaling. e,f for translating.

Other useful methods of the context are:

- ctx.save() – to save current transform in a stack (Last In First Out).
- ctx.restore() – to retrieve the trnasform from the top of the stack.

## An Example – The Koch Snowflake

The algorithm for drawing the Koch Snowflake can be found in the post Drawing The Koch Snowflake Fractal With GIMP.

Here’s an example in Javascript:

function drawSide(ctx, len){ if (len > 1) { var thirdOfLen = len / 3.; var rotationAngles = [0, -Math.PI / 3, 2 * Math.PI / 3., -Math.PI / 3]; rotationAngles.forEach(function(val){ if (val != 0){ ctx.translate(thirdOfLen, 0); ctx.rotate(val); } ctx.save(); drawSide(ctx, thirdOfLen); ctx.restore(); }); } else { ctx.moveTo(0,0); ctx.lineTo(len,0); //ctx.stroke(); } } ctx.translate(startX, startY); for (i=0; i<3; i++){ ctx.save(); drawSide(ctx, sideLength); ctx.restore(); ctx.translate(sideLength,0); ctx.rotate(2*Math.PI/3); } ctx.stroke(); }

Warning: using ctx.stroke() after every little line you draw might make your code inefficient, and slow down your browser.

Transformation functions are also part of the Processing language.