Tutorial: Introduction to canvas 4/4

In this fourth and last part of the canvas tutorial series, we are going to discuss how to use transformations on a canvas like translations, rotations and scaling.

Before we dive into transformations, we are going to discuss two important methods: save() and restore().

These two methods are used to save and restore the context's state. The state of the canvas contains the current style and transformations applied on a canvas.

The canvas maintain a stack of states:

Calling save() pushes the current state on the top of the stack
Calling restore() takes out the top state of the stack to use it

Using save() and restore() will save you a lot of headaches and lines of code.

There are a lot of transformations you can apply on your canvas: translation, rotation, scaling, etc...
Let us first discuss how to perform a translation on a canvas with the translate(x,y) method.

The translate(x,y) method moves the canvas and its origin to a specified point in the canvas. This point will become the new origin (0,0).

Below is an example showing that, we will first draw an horizontal line and then draw it again using a translation:

Code:


<script>
  function drawOnCanvas() {
    var canvas=document.getElementById("mycanvas");
		var ctx=canvas.getContext('2d');
		ctx.save(); //This saves the current context
		drawLines(ctx); //My own function that draws a path
		ctx.translate(0,10); //Moves the canvas and its origin to the new specified point
		drawLines(ctx); //Calls the same function except that now you can see there has been a translation
		ctx.restore(); //Restores the context to its previous state
  }

  function drawLines(context) {
    context.beginPath();
    context.moveTo(0,0);
		context.lineTo(50,50);
		context.lineTo(100,0);
		context.lineTo(150,50);
		context.stroke();
  }

  window.addEventListener('load', drawOnCanvas, true);
</script>

Let us now talk about rotation now. The rotate(angle) method perform a clockwise rotation of the canvas around its origin (0,0) with an angle in radians.

To move the center of the rotation, you would perform a translation of the origin first.

We can easily use the previous example:

Code:


<script>
  function drawOnCanvas() {
    var canvas=document.getElementById("mycanvas");
		var ctx=canvas.getContext('2d');
		ctx.save();
		drawLines(ctx);
		ctx.rotate(Math.PI/4); //This will perform a clockwise rotation of 45 degrees
		drawLines(ctx);
		ctx.restore();
  }

  function drawLines(context) {
    context.beginPath();
    context.moveTo(0,0);
		context.lineTo(50,50);
		context.lineTo(100,0);
		context.lineTo(150,50);
		context.stroke();
  }

  window.addEventListener('load', drawOnCanvas, true);
</script>

Let us finally talk about scaling with the scale(x,y) method.
The scale(x,y) method modify the units of our canvas. For instance calling scale(1,2) means that 1 pixel on the y axis would correspond to 2 pixel on the canvas.

Let us modify the scaling and then draw a circle and see how oval the circle will be:

Code:


var ctx=document.getElementById("mycanvas").getContext('2d');
ctx.save();
ctx.scale(1,0.5); //Means that 1px on the x axis will still be 1px but 1px on the y axis will be represented as 0.5px on the canvas.
ctx.beginPath();
ctx.arc(200,100,50,0,Math.PI*2);
ctx.stroke();