[html5] Exporting a large Canvas to SVG

[Philip Taylor]

2010/3/9 Shaun Morris <shaunwithanau at gmail.com>:
> No, this isn't quite what I was talking about. Let me try to explain it
> again to try and help. I want a drawing which is very large (20000*20000) to
> be able to be displayed at 1:1 ratio just inside of a limited size <div> so
> the user can see the drawing in great detail as they scroll around the
> contents of the div.
> This is possible in SVG as there are no size restraints on SVG, however, SVG
> cannot handle the amount of objects that I am drawing (approx. 15000+
> lines). So I want to use Canvas to sketch the 15000 lines, but since it is
> not able to have dimensions much larger then 4000*4000, I want to then
> display the full drawing (20000 * 20000) using SVG.
> In this way Canvas is doing all the work (scaling, etc.) and SVG is just
> being used as the medium to display.

It sounds like there's two performance problems:
 * You can't set up a 20000x20000 canvas, because it'll use 1.6GB of
RAM to store the bitmap.
 * You can't set up 15000+ lines in SVG, because the overhead of
maintaining the DOM (which is avoided when drawing the same lines with
canvas instead) is higher than you want.

You can't just combine canvas and SVG and expect their problems to
magically cancel each other out - instead you'd have to deal with both
their problems at once, which is not helpful :-)

If you can't store your whole image as either a bitmap (in canvas) or
vectors (in SVG), I think you'll just have to write code to only
render the visible part of the image and implement scrolling manually.
Provide some buttons or detect mouse drags on the canvas, and then do
a ctx.translate() before drawing. It sounds like you simply have too
much data for the browser to handle automatically (given that the
browser has to be generic and can't make assumptions about your
content), so you'll have to handle it manually.

-- 
Philip Taylor
excors at gmail.com