Проблема изменения размеров холста Sketchpad

Question

Итак, у меня возникли некоторые проблемы с использованием функции эскиза в элементе холста html5. Итак, настройки можно найти по ссылке jsfiddle ниже. ПРИМЕЧАНИЕ: в зависимости от вашего экрана недвижимости может потребоваться расширить область результатов.

http://jsfiddle.net/8UU3x/

Итак, я видел некоторые вопросы по изменению размеров холста здесь, но ничего достаточно конкретного, чтобы действительно помочь мне здесь. Так что я хотел бы использовать холст, чтобы сделать некоторые пометки на фоновом изображении (содержится в отдельном 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>

Как вы можете видеть в jsfiddle, вы можете сделать это изначально, но в реальном дизайне у пользователя есть возможность увеличивать / уменьшать изображение. При этом вы можете видеть, что начальные разметки не будут следовать за изображением (т. Е. Если вы подчеркнете "Образец текста для подчеркивания", а затем нажмете "Изменить размер", подчеркнутая часть больше не будет подчеркнута). Теперь я знаю, как изменить размер холста, когда это происходит, но я не знаю, как сделать так, чтобы наценки следовали за ним. Я где-то видел, что могу просто взять разметку, преобразовать ее в кодировку data/64 и, возможно, уменьшить ее. Проблема в том, что он не очень хорошо масштабируется (пикселируется).

Кроме того, пользователь все еще должен иметь возможность делать пометки после увеличения / уменьшения масштаба. Так есть ли хороший способ сделать это? Я слышал о масштабировании изображения, но затем я столкнулся с проблемами при продолжении разметки документа после изменения его размера (мышь смещена от разметки). Любая помощь будет отличной. Спасибо!

Answer 1

Хорошо, я понял это. Так что я сделал следующее

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);

Теперь это может растянуть изображение, поэтому оно не идеально. Это решение, с которым я иду, хотя.