2

Tengo un canvas de 800x400, estoy pintando sobre ella una imágenes de dimensiones muy pequeña y pixeladas (5x5, 10x5, 7x5, 5x7, etc). Al mandarlas al canvas haciendo escalados de [2, 2], [4, 4] etc. No se hace de forma lineal y no conserva la claridad de los pixeles. ¿Cómo se puede lograr esto?

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

ctx.drawImage(imagen, 10, 10);
ctx.scale(8,8);
ctx.drawImage(imagen, 10, 10);
canvas{
	border: 5px solid black;
	background: #FFF;
	width: 800px;
	height: 400px;
}
<img id="img" src="https://minecraft-statistic.net/face/JRMUS.png" hidden >
<canvas id="canvas" width="800" height="400" ></canvas>

1
  • ¿Podrías poner un ejemplo reproducible de lo que tienes hasta ahora? Commented el 17 feb. 2018 a las 21:45

1 respuesta 1

0

Para esto necesitas desactivar el imageSmoothingEnabled porque por defecto el canvas prueba alisar y suavizar las imágenes.

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

ctx.msImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

ctx.drawImage(imagen, 10, 10);
ctx.scale(8,8);
ctx.drawImage(imagen, 10, 10);
canvas{
	border: 5px solid black;
	background: #FFF;
	width: 800px;
	height: 400px;
}
<canvas id="canvas" width="800" height="400" >
<img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAsUlEQVQYlX2MMQrCQBBFX2JYNGC8gJ1EGzshh9ATpPIKIrYewEbE0i5FsLOztkxlFRsL8QzZhUQXJRZLtnRgmD/Dm+dMQ7fmT7lNOB62djYN4ExDt5ZvA50Tc5zNl3Z3AdIs5xFHVvuII9IsN4bisqvRbQBu9ysA49HEkOKFp8sC4RlgOOhTSWVNuizwKqkgAOH32OxPAKxXfXRZUEmF80wWdUt4dIIuwu/Zz0oqvvrDD0I/QTF2N0bTAAAAAElFTkSuQmCC" />
</canvas>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.