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.
Follow these steps to draw a sheared rectangle:
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;
Translate the canvas context and then apply a custom shear transform to the context:
Draw the rectangle:
context.fillStyle = "blue"; ...