Forums » Help » "Scrolling div"

What would be the best way to create a kind of a "scrolling div" in cavas?

Just like you have a div with defined height and overflow:scroll in HTML, how can you achieve a similar effect in canvas if space is not enough for the specified content?

Thanks!

You'll probably need to dip down to the native canvas methods and use drawImage directly. The good news is it's third form takes source x, y, width, height and destination x, y, width, and height. That means making a scrolling section in your game would mostly be a matter of keeping track of the x and y you care about in the source image and drawing it to wherever you want in your game.

FYI, it's also possible to scale an image this way by using different widths and heights. There can be performance penalties for doing this too much but one call among all your entities probably won't be a big deal. ( =

@drhayes thanks a lot for that reference to drawImage.

So, I would create an image based on a text, and create some kind of stuff to use the drawImage to only see the part of the image I'm scrolling in.

I'll try to get my hands on it whenever I can.

Thanks!