I want to know how I can translate an entire scene already drawn on an html5 canvas, for example 5 pixels down. I know the translate method just translates the canvas' coordinate system, but I want to know if there is a way to translate the entire scene that is already drawn onto the canvas.
+1
A:
Not unless you take a screenshot and translate that.
However, just inserting
context.translate(0, 5)// or your values
right before your drawing code should do the trick.
Reference: https://developer.mozilla.org/en/Canvas_tutorial/Transformations#section_3
pop850
2010-08-02 21:01:33
I already covered that, and (at least I thought I) made it clear that's not what I wanted. That translate will translate anything I draw afterwards, not anything that is already drawn.However, your screenshot solution may be what I wanted. Do you have instructions on how to do that?
George
2010-08-02 21:06:40
The Canvas object has a method called toDataUrl. See this question http://stackoverflow.com/questions/934012/get-image-data-in-javascript
Juan Mendes
2010-10-20 18:05:13
A:
You can apply the transforms and call drawImage passing in the canvas itself.
ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
When doing that, the original contents will still be below. Depending on the effect you're trying to accomplish, setting the globalCompositeOperation may help you with that.
But it's likely you'll need to use drawImage to first copy to a second canvas, clear the current, apply the transform and draw from the copy.
Kyle Jones
2010-08-02 21:08:13
This sounds like what I wanted. I'll try it out and let you know if it worked for me.
George
2010-08-02 21:18:54
This solution worked great for me. However, it doesn't work so well when there's scaling involved as well. I have a canvas where the scaling is such that the drawing area has a width and height of, say, 120000 and 60000. The canvas element itself has width 1200 and height 600, so the scaling transformation is performed on the coordinate system before drawing. Anyway, the problem is that translating AND scaling will blur the image if I copy it to a second canvas, clear the current, and apply the transform and copy like you said. Just wanted to know if you knew how to make it not blurry.
George
2010-08-03 19:03:55
I'm not entirely sure I understand, but blurring would occur if you're scaling up from a lower resolution. If you're going from a higher resolution to a lower then doing drawImage back into the higher, it could be blurred.Kind of hard to say how to fix it without seeing what exactly you're doing.But I will say that my example of copying to a second canvas only to copy back isn't really the best idea. It would be probably be better to keep a "work" canvas and a "display" canvas where the drawImage only goes from the work to the display. rather than back and forth.
Kyle Jones
2010-08-03 19:47:08
Yeah that's exactly what's going on. The problem is that if I draw from the main canvas that has the high resolution to the backup canvas, it will always be drawn using the base 1200x600 resolution, instead of the scaled-up 1200000x600000 resolution. Also, the going back and forth solution is OK for my purposes, since it only needs to do that when the user wants to, and won't be doing that continuously.
George
2010-08-03 21:37:58