Question

I am trying to recreate the output of a CSS transform using text rendered on to an HTML5 Canvas.

This is the actual CSS transform I want to recreate:

transform : skew(-22deg, -8deg);

I have been playing around with the context.transform() and context.setTransform methods in the HTML5 canvas API but have not been able to get close to the above transformation?

How can I match the above css transform in a canvas element?

Also, are there any online tools available to help with visualizing matrix transformations?

Thanks in advance.

Answer 1

Live Demo

Just used the transform like you thought, the key is just knowing where the value should go.

var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 100;

ctx.font = "20px arial";
var rad1= -8 * Math.PI / 180;
var rad2= -22 * Math.PI / 180;


ctx.setTransform(1, rad1, rad2, 1, 0, 0);
ctx.fillText("test",30,80);