HTML5 canvas: How to animate context?

Question

Is there any way how to animate context in the HTML5 canvas 2d?

I would like to create huge context but to show only small part of it on the screen. Then I would like to apply translate animation to scroll the context to show other parts of the context.

How should I do it?

Answer 1

Create one canvas with a context that contains the entire thing you want to display, you can do this by making it onscreen if you need to so you can see what it looks like.

Then take what you have for making that and enclose it within a function or some kind of closure. Then use document.createElement('canvas'), and use it's context for the code you created for the display context.

You can then use .drawImage() when within the main context of your visible canvas, to draw the other context to the screen, and animate it upwards in your animation loop.

I wish I could've made that a little easier to understand, it's easier to understand by showing an example.

Off-screen rendering is essentially what I'm trying to explain.