HTML5 Large Canvas

Question

I noticed that when dynamically creating a large canvas (6400x6400), which will not be drawn on it for quite some time, and when setting the canvas to a small size, it works in 100% of cases, however, since I do not know anything better, I have no other of choice, except to try to get the large canvas to work correctly.

thisObj.oMapCanvas = jQuery( document.createElement('canvas') ).attr('width', 6400).attr('height', 6400).css('border','1px solid green').prependTo( thisObj.oMapLayer ).get(0);

// getContext and then drawing stuff here...

code>

The purpose of the canvas is to simply draw a line between the two nodes (images) that are in the div container that you can drag and drop (the viewport, which I think people call it).

What I “think” can happen is that when you resize the canvas, it clears the canvas and interferes with drawing the context, as I said earlier, it works all the time when the canvas is much smaller.

Has anyone experienced this before and / or knew any possible solutions?

Answer 1

This is a huge canvas. 6400 x 6400 x 4 bytes per pixel is 156 MB, and for your implementation you may need to allocate two or more buffers of this size for double buffering or you also need to allocate video memory of this size. It will take some time to allocate and clear all this memory, and you will not be able to succeed with this allocation. Is there a reason you need such a huge canvas? Instead, you can try to determine the size of your canvas as necessary to draw a line between the two divs, or you can try using SVG instead of canvas.

- , . Google Maps , , ( , , ), , , - , .

Answer 2

, HTML5, -, , .

, , ... , . , ? - ?

Answer 3

I had the same problem! I used trting to use a large canvas to connect some divs. In the end, I gave up and drew a line using javascript (I drew my line using small images as pixels - at first I did it with a div, but in IE divs came out too big). A.