HTML5 Canvas Cookbook

Creating a custom transform

If you're looking to perform a custom transformation other than a translation, scale, or rotation, the HTML5 canvas API also provides a method which allows us to define a custom transformation matrix that can be applied to the current context. In this recipe, we'll manually create a translational transform to demonstrate how the transform() method works.

How to do it...

Follow these steps to perform a custom transform:

1. Define the canvas context and the dimensions for our rectangle:

   window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var ...