Custom scroll on html5 canvas

Question

What is the recommended way to provide scroll and custom scrollbars for very large data displayed in hmtl5 canvas?

I need to display data with a size of 128000x128000 pixels. Using a canvas with a width / height set to 128000 is not an option, as it will use a huge amount of RAM (about 61 GB according to my quick calculations).

So, I need a way to create custom scrollbars for an HTML5 canvas.

Answer 1

jCanvas is a jQuery plugin that can help you.

Answer 2

After a quick test, I'm not sure Chrome or Firefox will even make the canvas so big. My bet would be to create a canvas element, but never add it to the DOM. Similar:

var hiddenCanvas = document.createElement('canvas'); hiddenCanvas.width = 128000; hiddenCanvas.height = 128000; var hiddenContext = hiddenCanvas.getContext('2d'); 

Then create a smaller canvas that actually displays part of your hidden canvas

 <canvas width="something reasonable" height="something reasonable" id="viewCanvas"/> 

And use the drawImage method to draw the fragments:

 var viewCanvas = document.getElementById('viewCanvas'); var viewContext = viewCanvas.getContext('2d'); viewCanvasContext.drawImage(hiddenCanvas, 40, 50, viewCanvas.width, viewCanvas.height, 0, 0, viewCanvas.width, viewCanvas.height); 

Then you will have to either offer the up / down / right / left buttons to move, or maybe fake scrollbars using 20x wide DIVs that only show scrollbars and which you will type onverroll even listener on. And each time the user changes position, repeat the call to drawImage, updating the x / y positions (40 and 50 in my example).

Having said that, again, even when hidden, I doubt that browsers will work with a large canvas.

I’m looking for a solution to the same problem, so if you are lucky in your research, share them.

Answer 3

Interest Ask. I did not use <canvas> very much, but I believe that the interior of <canvas> best perceived as an image, i.e. its black box before the DOM.

As such, I don’t think you can really scroll it the way you imagine. If you have 128000 × 128000 <canvas> , you can put it inside a <div> , for example, for example. 1280 × 1280 and set the <div> to overflow:hidden , but as you say, 128000 × 128000 <canvas> impractical.

I suppose that the kind of solution you were looking for would provide a virtual canvas interface of 128000 × 128000, but then split it into pieces, provide a scroll interface and draw each piece when it was scrolled through the window.