Canvas transformation is generally used to set up comprehensive canvas. It can be overkill if you want to create simple canvas. You would use drawing on canvas in those cases.

HTML5 canvas transformation rely on modification layer that is always present as part of your canvas. You may choose not to use but it will always be there for you.

It is good practice, when using canvas transformation, to start your drawing at the origin of the canvas and then apply all of the required transformations as you go with your task at hand.

Let’s look at how to apply transformation for drawing a line on canvas.

// JScript source code

 

<script>

 

  function drawLine() {

 

    var myCanvas = document.getElementById('canvas');

    var myContext = canvas.getContext('2d');

    myContext.save();

    myContext.translate(30,90);

    myContext.beginPath();

    myContext.moveTo(0, 0);

    myContext.lineTo(90, -90);

    myContext.stroke();

    myContext.restore();

 

  }

 

   window.addEventListener("load", drawLine, true);

 

</script>

Important points about this code are: saving context before you apply changes to canvas will help you restore it at the end of the drawing and transformation operations. In addition, we start at (0,0) coordinates which is a good practice.