HTML5 Canvas Cookbook

Shearing the canvas context

In this recipe, we'll use what we've learned from the transform() method of the canvas context to create a custom shear transformation to skew the canvas context horizontally.

How to do it...

Follow these steps to draw a sheared rectangle:

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

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

2. Translate the canvas context and then apply a custom shear transform to the context:

       // shear matrix: // 1 sx 0 // sy 1 0 // 0 0 1 var sx = 0.75; // 0.75 horizontal shear ...