Desabilitando a Interpolação ao Redimensionar um <canvas> em JS
Resposta Rápida
Para desabilitar a interpolação ao redimensionar um elemento canvas, você pode definir a propriedade imageSmoothingEnabled do contexto de desenho como false. Isso permite que você mantenha a clareza da imagem no canvas, mesmo ao redimensionar.
const canvas = document.getElementById('meuCanvas');
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
// Agora você pode redimensionar o canvas sem perder a clareza da imagem.Usando a Propriedade 'image-rendering' no CSS3
O CSS3 oferece controle sobre como as imagens, incluindo <canvas>, são escaladas por meio da propriedade image-rendering. A opção pixelated usa a interpolação por vizinho mais próximo.
canvas {
image-rendering: pixelated;
}
// As imagens no canvas manterão um estilo pixelado.Observe que o suporte para esse recurso pode variar entre diferentes navegadores, portanto, é recomendável fazer testes.
Compatibilidade com Navegadores
Mozilla e Webkit
O suporte para essa propriedade nos navegadores é bastante inconsistente. No Firefox, você deve usar mozImageSmoothingEnabled, e nos navegadores baseados em Webkit, use webkitImageSmoothingEnabled.
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
// A partir de agora, todos os navegadores manterão a nitidez do canvas.Posso Usar?
Recomendamos verificar o suporte para image-rendering: pixelated em Caniuse.com. Desde a versão 38 do Chrome, esse recurso está disponível.
Auxílio do JavaScript
Redimensionamento Manual
O JavaScript é útil se você precisar de controle total sobre o processo. Você pode usar um canvas grande e redimensionar cada pixel individualmente.
ImageData para Manipulação de Pixels
A propriedade ImageData pode ser usada para ajustes finos aplicando seus próprios algoritmos de processamento de pixels.
Melhores Práticas para Aplicações de Alto Desempenho
No caso de jogos de 8 bits e projetos que requerem alto desempenho, as imagens devem ser redimensionadas no servidor com antecedência para evitar possíveis atrasos.
Visualização
Para clareza, veja como a qualidade dos pixels é preservada quando a interpolação está desabilitada:
| Redimensionamento do Canvas | Qualidade do Pixel |
|---|---|
| Antes do Redimensionamento | 🖼️🔍: Clareza excelente! |
| Após Desabilitar a Interpolação | 🖼️🔎🚫💧: Clareza preservada! |
Não Subestime o Poder dos Padrões
Use ctx.createPattern para criar um padrão de imagem escalável:
// Suponha que 'imagem' seja sua imagem ou outro canvas
var padrao = ctx.createPattern(imagem, 'repeat');
ctx.fillStyle = padrao;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Seu canvas se transformará em uma coleção de imagens nítidas.Exemplos Práticos
Aproveite exemplos interativos como JsFiddle ou CodePen para ver os resultados ao trabalhar diretamente com o código.
O Método scale()
O método scale() permite que você mantenha a nitidez dos desenhos após o redimensionamento, se imageSmoothingEnabled estiver definido como false.
ctx.scale(2, 2);
// Todos os desenhos subsequentes permanecerão igualmente nítidos.Recursos Úteis
- Padrão HTML – descrição oficial sobre como trabalhar com imagens no canvas.
- CanvasRenderingContext2D: propriedade imageSmoothingEnabled - Web APIs | MDN – descrição detalhada da propriedade
imageSmoothingEnabled. - WebGL Redimensionando o Canvas – informações detalhadas sobre como trabalhar com WebGL e redimensionar o canvas.
- Explorando técnicas de desenho em canvas — A Perfeição Mata – um guia abrangente sobre técnicas de desenho em canvas, incluindo como eliminar borrões durante o redimensionamento.
- Referência do Canvas HTML – guia de referência para a tag HTML
<canvas>. - Exemplo do CodePen: Desabilitando a Suavização de Imagem do Canvas – exemplos que demonstram as capacidades de manipulação de visualização.