Тебе нужно сперва создать картинку и присвоить её src аттрибут, и затем когда эта картинка использовать её для отрисовки.
Т.к. dataUrl - это не совсем картинка, а URL 64 Encoded данные картинки.
Что-то типо:
var img = new Image();
img.onload = function() {
context.drawImage(this, 0, 0);
};
img.src = dataURL;
Можешь попробовать отрисовать сразу как присвоишь src, т.к. большинство броузеров это сделают синхронно. Но это нужно тестировать.
Также для скейла - я бы перерисовывал данные заново со скейлом, заместо скейлинга прошлой картинки с самой канвы, т.к. как ты понимаешь при зууме назад, у тебя не будет данных картинки по бокам, а при зууме вперёд, у тебя будут размыты пиксели.