HTML5 Game - Canvas Shear Equation

Introduction

The equations for general transformations is shown as follows:

x' = ax + cy + e 
y' = bx + dy + f 

The letters a...f correspond to the arguments that you pass to transform() and setTransform():

transform(a, b, c, d, e, f) 
setTransform(a, b, c, d, e, f) 

c is multiplied by y to generate x', and b is multiplied by x to generate y'.

The value of x influences the value of y, and vice versa, which means that c and b can be used to implement shear.

An example of shearing:

controlsContext.transform(1, 0, 0.75, 1, 0, 0); 

If you put those six arguments into above equation, we would get:

x' = x + 0.75y 
y' = y 

The equations shear each x coordinate of every point drawn, leaving the y coordinates untouched.

Related Topic