[html5] Exporting a large Canvas to SVG

[Shaun Morris]

Thanks a lot. This is what I figured and have been trying achieve but I
wanted to make sure I wasn't missing some obvious solution. As of now I have
the canvas displaying the drawing and the user can use the arrow keys to pan
(each keypress calls a translation) which will eventually be handled by
custom scrollbars.

The real reason that I hoped this was possible is that this drawing is
essentially just a backdrop onto which 'devices' are able to placed. These
devices are dynamic in that they can be added, moved and resized.

The tricky part is that they exist in the same coordinate system as the
drawing. So while they can be moved and resized independent of the
background. If the background is panned/resized, they have to move/change
size appropriately.

As I see it I have two choices.

Choice 1: Do everything in canvas so there is only one coordinate system to
keep track off.
Choice 2: Let the background by drawn by the canvas, and let the devices be
handled by SVG. (There are usually just a few devices. approx 30-40)

I had been avoiding Choice 1 up this point because I felt that the advantage
of only keeping track of one set of numbers was offset by how much harder it
is to process mouse events which is largely how devices are interacted with.

However, now I think it may be my best option.

On Tue, Mar 9, 2010 at 11:16 AM, Philip Taylor <excors at gmail.com> wrote:

> 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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20100309/c54376b3/attachment-0002.htm>