Canvas - scale method

[Олег Адам]

    function zoom() {
			switch(this.id) {
				case "zoom_in":
				    scale /= scaleMultiplier;
				    img_update(scale);
				    break;
				case "zoom_out":
				    scale *= scaleMultiplier;
				    img_update(scale);
				    break;
			}
	}
						
	function img_update( scale ) {
			contextUI.scale(scale, scale);
                        contextUI.drawImage(canvas, 0, 0);
			context.clearRect(0, 0, w, h);
			
	}

По клике на кнопки ZoomIn, ZoomOut вызываю функцию zoom().
Функцию img_update( scale ) использую для перерисовки канвас доски. При клике канвас сразу не зумится, но при рисовании начинает зумить.
Что не так? Спасибо.

[moka]

contextUI.scale(scale, scale);

Ты скейлишь контекст который отрисовывает UI?
Или ты хочешь скейлить сам игровой контекст?

contextUI.drawImage(canvas, 0, 0);

Ты в контекст для UI рисуешь canvas? canvas - это хендл кртинки, или самой canvas? хендл должен быть картинки.
Вот хорошая справка.
http://www.html5canvastutorials.com/...canvas-images/

Далее ты просто отчищаешь свой контекст и всё.
Если это то чего ты хотел, то у тебя просто будет пусто на экране после зуума.

Открой консоль, думаю у тебя будет ошибка на отрисовки картинки, если это так, тогда у тебя дальнейший код в данной функции не выполниться, следственно функция не будет выполнена полностью.

Также недостаточно информации. Лучше дай ссылку на рабочий пример или забей в http://jsfiddle.net/ ситуацию.
Даю 90% что как забъёшь в jsfiddle сам найдёшь ошибку.

[Олег Адам]

canvas - это хендл не картинки, а текущего рисунка на самом canvas элементе.

[moka]

Для получения данных картинки из контекста для canvas переменной, ты используешь toDataURL или getImageData?

[Олег Адам]

Сообщение от MoKa

Для получения данных картинки из контекста для canvas переменной, ты используешь toDataURL или getImageData?

toDataURL()..

[moka]

Тебе нужно сперва создать картинку и присвоить её src аттрибут, и затем когда эта картинка использовать её для отрисовки.
Т.к. dataUrl - это не совсем картинка, а URL 64 Encoded данные картинки.

Что-то типо:

var img = new Image();
img.onload = function() {
  context.drawImage(this, 0, 0);
};
img.src = dataURL;

Можешь попробовать отрисовать сразу как присвоишь src, т.к. большинство броузеров это сделают синхронно. Но это нужно тестировать.

Также для скейла - я бы перерисовывал данные заново со скейлом, заместо скейлинга прошлой картинки с самой канвы, т.к. как ты понимаешь при зууме назад, у тебя не будет данных картинки по бокам, а при зууме вперёд, у тебя будут размыты пиксели.

[Олег Адам]

попробую именно так!