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. <div>
<br></div><div>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. </div>
<div><br></div><div>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.</div><div><br></div><div>My question is will this work with <span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace; font-size: 13px; color: rgb(0, 102, 0); line-height: 17px; white-space: nowrap; ">toDataURL<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; line-height: normal; white-space: normal; font-size: small; ">? I am guessing that it wont, as it will just send what is actually visible on the canvas to the SVG. </span></span></div>
<div><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace; font-size: 13px; color: rgb(0, 102, 0); line-height: 17px; white-space: nowrap; "><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; line-height: normal; white-space: normal; font-size: small; "><br>
</span></span></div><div>Is there any other way to do this or something similar?</div><div><br></div><div><br></div><div><br></div><div><br></div>