HTML5 Canvas Transformation

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. 

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …