[html5] Exporting a large Canvas to SVG

Shaun Morris shaunwithanau at gmail.com
Tue Mar 9 07:32:17 PST 2010

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.

If anyone else can think of an alternative that solves my problem I would
love to hear it. And CYp if drawImage() would indeed work to do this I'm
sorry for the confusion.

2010/3/8 CYp <tccyp86 at hotmail.com>

>  I think you can use the method:
> void drawImage(in HTMLCanvasElement image, in float dx, in float dy, in
> optional float dw, in float dh);
> using this method you can draw one canvas to another one with scale.
> ------------------------------
> Date: Mon, 8 Mar 2010 15:02:32 -0500
> From: shaunwithanau at gmail.com
> To: help at lists.whatwg.org
> Subject: [html5] Exporting a large Canvas to SVG
> Currently I am drawing a very large picture to the canvas (think an entire
> building measured in inches) which is composed of numerous lines (approx
> 20000). Obviously this picture is having to be scaled down considerably to
> fit on a canvas. However the user has the option to zoom in on this picture.
> What this in turn does is set a scaling factor to the canvas causing parts
> of the drawing to be outside of the canvas's dimensions.
> What I want to do is use SVG (which can be much larger but cannot be used
> to draw the picture as it consists of too many lines) to replicate what is
> being drawn to the canvas (including the parts that spill over). This is
> because I can place the large SVG inside of a limited sized <div> and the
> user will be able to use the scroll bars to see the entire building.
> The idea is that I let canvas handle the data and scaling. Then once I have
> it the size that I want,  then display it in SVG.
> My question is will this work with toDataURL? I am guessing that it wont,
> as it will just send what is actually visible on the canvas to the SVG.
> Is there any other way to do this or something similar?
> ------------------------------
> 使用Messenger保护盾2.0,支持多账号登录! 现在就下载! <http://www.windowslive.cn/safe/>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20100309/5483c6b9/attachment-0003.htm>

More information about the Help mailing list