Question

I have a div which contains 6 canvases with different webkit transromations applied and I want to “draw” the content of this div into one canvas (“take a screenshot” of this div). But seems like it’s going to be a little tricky, because there is no way to draw div directly into canvas and webkit transformations are not applied when I’m trying to draw transformed canvas into another one.

Is it possible to properly draw these canvases using canvas transformations (scale, translate, etc)? Is there any good lib which helps you to convert 3d transformations into 2d?
Thanks in advance.

Answer 1

It’s not possible to capture the contents of a div as an image, but you could use a parent canvas and draw the others into it. You can do that by using the drawImage method of the parent canvas’s context and pass the source canvas as the image argument.

By setting the transformation of the destination context with the methods defined here you can define whatever affine transformation you want (scaling, translation, rotation – but not perspective).