Canvas Sketchpad re-sizing issue

Question

So, I'm having some issues using the sketch feature on the html5 canvas element. So, the setup can be found in the jsfiddle link below. NOTE: depending on your screen real-estate you may have to expand the result pane.

http://jsfiddle.net/8UU3x/

So, I have seen some canvas resizing questions on here, but nothing specific enough to really help me out here. So what I'd like to do is to use the canvas in order to make some markups on the background image (contained in the separate div).

<div id="dvPage" style="background-color:#ffffff;"><img id="imgFull" src="http://s15.postimg.org/5zng0yvdn/sample_jsfiddle.png" alt="" border="0" style="width:25px;" /></div>
<div id="dvProtector" style="position:absolute;top:0px;left:0px;bottom:0px;right:0px;background: url('http://s15.postimg.org/5zng0yvdn/sample_jsfiddle.png') no-repeat -200px -200px;z-index:100;"></div>

As you can see in jsfiddle, you can do that initially, but in the actual design the user has the ability to zoom in/out on the image. In doing so, you can see that the initial markups won't follow the image (i.e. if you underline "Sample Text to Underline" and then hit resize, the underlined portion is no longer underlined). Now, I know how to resize the canvas when this happens, but I don't know how to make it so the markups follow it. I did see somewhere that I could just take the markup convert it to the data/64 encoding and possibly scale that down. The problem is that it doesn't scale back up very well (pixelated).

Also, the user should still be able to make markups after zooming in/out. So, is there a good way of doing this? I heard of scaling the image but then I run into issues on continuing to markup the document after resizing it (mouse is offset from the markup). Any help would be great. Thank you!

Answer 1

Alright, I figured it out. So what I did the following

var img = new Image();
img.src = myCanvas.toDataURL();
myCanvas.attr('width', newWidth);
myCanvas.attr('height', newHeight);
var context = myCanvas.getContext('2d')
context.drawImage(img, 0, 0, newWidth, newHeight);

Now this can stretch the image so its not perfect. It's the solution I'm going with though.