resolvido -JS - Sprite Sheet ultrapassa a região a ser desenhada quando esticado

[HermesPasser]

Como o título já disse, estou com um problema de desenhar na tela um pedaço da imagem, quando somente desenho este pedaço em seu tamanho natural obviamente nada ocorre mas quando tenho esticá-lo e vaza para fora da área da imagem que delimitei para a contexto desenhar. Deixei o teste como anexo.

Imagem

Pedaço em seu tamanho natural e esticado em duas vezes

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var imagem_pedaco = new Image(); // tamanho > 120x89 (o sprite comeca na posicao 3x2 e tem 35x35 de tamanho)
var imagem_total  = new Image(); // tamanho > 35x35
var tamanho_sprite = 35;

imagem_pedaco.src = "pedaco.gif";
imagem_total.src = "total.gif";

window.onload = function() {

	// Imagem sendo desenhada em seu tamanho natural
	ctx.drawImage(imagem_pedaco, 20, 20, tamanho_sprite, tamanho_sprite);
	
	// Imagem sendo desenhada com o dobro de seu tamanho
	ctx.drawImage(imagem_pedaco, 100, 20, tamanho_sprite * 2, tamanho_sprite * 2);

	// Pedaço da imagem sendo desenhado em seu tamanho natural
	ctx.drawImage(imagem_total, 3, 2, tamanho_sprite, tamanho_sprite, 
					20,  100, tamanho_sprite, tamanho_sprite);

	// Pedaço da imagem sendo desenhado com o dobro de seu tamanho
	ctx.drawImage(imagem_total, 3, 2, tamanho_sprite, tamanho_sprite, 
					100,  100, tamanho_sprite * 2, tamanho_sprite * 2);
}

 

[HermesPasser]

Para parar com isso, eu só precisava adicionar essa linha antes:

ctx.imageSmoothingEnabled = false

Eu achava que minha lógica estava errada, mas quando fui procurar na documentação eu achei essa linha acima que não era citada nos tutoriais que vi.

 

[Alkemarra]

Tópico trancado e movido para a seção Resolvidos para futuras consultas.