HTML5 Canvas: How to know the limit for the size?

Question

I have a canvas that is 1400px wide and around 12000px long. I have a hierarchy diagram that I need to draw. When it is expanded fully, it takes up the entire canvas (the size that I have set).

Now this works fine when I access the page from laptop (on various browsers).

But when I access it fron Safari on iPad, the canvas does not show up, or the content on the canvas is not visible. I think, this is due to the large size of the canvas.

So, it seems, memory availability or device dependency is there, that limits the size (withing the allowed size as per W3C).

How to know or calculate the size? Or is there some workarounds? Is there any other way round? I am a beginner.

Answer 1

Alternative ways (anwsering the comment):

1. use multiple canvases (one for each depth level)
2. use an image rendered on-the-fly by the backend (php? ruby? python? java?)
3. use multiple divs styled with CSS (cool & lightweight solution)
4. render several small images and position them with CSS (mix of #2 and #3)

These are just proposals, not tested on real data.