0

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.

Ninja
  • 163
  • 4

1 Answers1

0

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).

andrewmu
  • 14,276
  • 4
  • 39
  • 37
  • yeah, I know it. But for some reasons I can't use parent canvas. Thanks for you answer anyway. – Ninja Feb 07 '12 at 09:35
  • Why can you not use it? If you have another canvas in the document, which is the parent and you get the 2D context for it, you should be able to draw the other canvases into it as if they were images (you can use `drawImage(, , )` – andrewmu Feb 07 '12 at 12:33
  • Because canvases which I need to draw are transformed using webkit transformation and when I draw them into another canvas, these transformations are not applied. – Ninja Feb 14 '12 at 08:11
  • Ok, but I'm saying you could maybe apply the same (or equivalent) transformations to the Canvas context and then draw the other canvases to get the same results. – andrewmu Feb 14 '12 at 12:38
  • Take a look at my questions above :) I'm looking for a lib or techniques which helps you convert all 3d transformations into 2d so I can apply them using canvas methods (translate, scale etc.) and achieve my goal. – Ninja Feb 15 '12 at 11:51
  • yes, using the power of reading, I can say: I don't think there's a library to do this, and if you are setting perspective (and not just a view from infinity) on the 3D transforms, in general there will be no equivalent 2D (affine) transformation. You can fake it up in some cases (like here http://stackoverflow.com/questions/3836036/mode7-like-perspective-transform-in-canvas), but it's a bit fiddly. – andrewmu Feb 15 '12 at 12:52