CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Edd Chang
Edd Chang

Reputation: 1013

Panning Off screen Canvas

I want to be able to have an off screen canvas that would be greater than the onscreen canvas. The onscreen canvas would be my view port and I want to pan across the offscreen canvas. I want to click on a button and I want the viewport to move to a specific location of the offscreen canvas. Any idea how this would work? I am not making a game, just a big canvas with different things spread across.

Upvotes: 0

Views: 465

Answers (1)

Edd Chang
Edd Chang

Reputation: 1013

I managed to do this by following steps from the following link:

Panning and scrolling background images using the canvas element

The tutorial talks about how to pan the background using an image. I replaced the image with an offscreen canvas. The offscreen canvas had thrice the width of the onscreen canvas. 

offscreenContext.canvas.width = onscreenContext.canvas.width * 3;
offscreenContext.canvas.height = onscreenContext.canvas.height;

And when I had to move the screen around, I would keep the y Axis on 0 and calculate the new position for the x axis. This resulted the screen to pan from left to right.

Upvotes: 2

Related Questions