Как задать 100% масштабирование изображения в HTML5 Canvas?

Question

[jenya_zhilin]

Доброго времени суток! Есть изображения, которое подключено через Canvas. Это изображение очень сильно масштабируется, пытался устранить, но не получилось. Думаю, может в Canvas есть метод подобный. Нету желания через костыли делать это в JS.

$(function() {
	var cvs = document.getElementById('game');
	var ctx = cvs.getContext('2d');
	
	ctx.fillStyle = "black";
    ctx.font = "30pt Verdana";
    ctx.fillText("Получаем ответ от сервера...", 350, 550);
	
	var bg = new Image();
	
	bg.src = "location.jpg";
	
	function draw() {
		ctx.drawImage(bg, 0, 0);
	}
	
	setTimeout(draw, 3000);
});

Comments

[twobomb]

ctx.drawImage(bg, 0, 0, cvs.width,cvs.height);

Answer 1

[jenya_zhilin]

Нашел решение:
ctx.scale(0.5, 0.45);

Answer 2

[Александр]

Сложно без примера. Видимо всё размыто, растянуто? Уберите установку размеров в CSS. Нет? Тогда добавьте установку размеров в JS.

Comments

[jenya_zhilin]

[jenya_zhilin]

Сейчас пробую через ctx.scale(0.6, 0.6);

[Александр]

А, картинка просто большая чтоль? Ну тогда всё просто. context.drawImage, выглядеть будет примерно так:

context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);

. Но сие фокус может деформировать картинку, поэтому можно добавить проверку на соотношение сторон и отношение размеров, и на основе них вписывать картинку в canvas.