🥇 Pixels quadrados no Canvas (por enquanto)

Se você está tentando fazer jogos retrô super legais com o Canvas, DEVE ser capaz de desenhar pequenas imagens e esticá-las com CSS aplicando isso ao objeto canvas:

image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
width: 500%;

MAS, o Chrome estragou tudo: o -webkit-optimize-contrast não está funcionando e o bug foi aberto há muito tempo, então precisamos resolver o problema com nossas próprias mãos …

A (an) resposta é “não faça o alongamento em CSS, mas no próprio Canvas” … em No contexto do canvas, você pode definir as seguintes opções:

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;

Então, quando você desenha:

ctx.save();
ctx.scale(5, 5); // Scale 5x
.... // draw here
ctx.restore();

Ahh, lindos pixels quadrados.

Related Posts