Scale Canvas Image

Question

Scale Canvas Image

Navigation

#1 by (0 votes)

0

I have a 800x400 canvas, I'm painting on it a very small and pixelated images (5x5, 10x5, 7x5, 5x7, etc). When sending them to the canvas doing scaled [2, 2], [4, 4] etc. It is not done linearly and does not preserve the clarity of the pixels. How can this be achieved?

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>

javascript html5 canvas

asked by Yenny Farfan 17.02.2018 в 22:40

source

1 answer

The best book to learn Python [closed] Authentication recommendations in Angular 2+

score 0 · Answer 1

For this you need to deactivate the imageSmoothingEnabled because by default the canvas tries to smooth and soften the images.

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>