Search code examples
javascriptcanvasgwt

How to use putImageData() on a rotated canvas?

I need to draw rotated image data on a canvas. (This is a GWT project and the context is an instance of com.google.gwt.canvas.dom.client.Context2d.)

I am trying to use the following code:

context.rotate(rotation);
context.putImageData(data, x, y);
context.rotate(-rotation);

But that code does not draw a rotated image. If I change the code like this:

context.rotate(rotation);
context.fillRect(x, y, 100, 50);
context.rotate(-rotation);

then a rotated rectangle will be drawn on the canvas. Is this an API bug, or my fault? What can I do to correct it?

I also tried using drawImage() instead of putImageData() to test how that method works. It works with rotation fine. But I need to draw ImageData that I take from another canvas. Are there any fast methods to translate ImageData to ImageElement? In what units does ImageData return its size?

Solution

  • putImageData is not affected by the transformation matrix.

    This is by the Spec's orders:

    The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

    What you can do is putImageData to an in-memory canvas, and then

    context.rotate(rotation);
context.drawImage(inMemoryCanvas, x, y)
context.rotate(-rotation);

    onto your regular canvas.

    NOTE: from your edit you seem to imply that you might just be drawing from one canvas to another without changing any of the imagedata. If this is the case, definitely just use drawImage(othercanvas, x, y) instead of using getImageData and putImageData if possible. Using drawImage is far faster.