Question

I need to solve a complex situation, where i already have a Canvas element rendered with some kind of text lines and etc. I don’t know how and which way it was rendered. But now i need to set the transformation of that means rotate , scale it etc.

var canvas = document.getElementById("item1-canvas");
var ctx = canvas.getContext("2d");

var angle1 = 0.1;
var angle2 = 0.14;
var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);

var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;

ctx.setTransform(a, d, b, e, c, f);

As i set transform or any thing the canvas cleared and needed to be redrawn, but i don’t know the exact mechanism of first drawing. To solve this i came to a thought to render a canvas inside another canvas, so that initial canvas don’t need to be rendered any way. And we can set the transforms of second canvas.

How can i do so?

Answer 1

If you render one (bitmap) canvas to another (using drawImage()) just to introduce transformation you will get poor results. This is because the results of a canvas are not vectors, but pixels.

You need to trap and record the drawing commands on the first canvas context so that you can replay them later under a transformed context.