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.

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.

• javascript
• html
• canvas

2 Answers 2

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.

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: MDN Canvas Tutorial (Transformations)