JSFiddle - React, Tailwind, and code Playground

Disable Interpolation when Scaling a <canvas> http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas

by ikaruss

HTML

<canvas id='a' width='21' height='21'></canvas>
<canvas id='b' width='105' height='105'></canvas>

CSS

canvas { border: 5px solid #ddd; }

JavaScript

var png = document.createElement('img');

$('#a').each(function () {
    var ctx = this.getContext("2d");

    ctx.moveTo(0,0);
    ctx.lineTo(21,21);
    ctx.moveTo(0,21);
    ctx.lineTo(21,0);
    ctx.stroke();
    
    png.src = this.toDataURL('image/png');
});

$('#b').each(function () {
    var ctx = this.getContext("2d");

    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(png, 0, 0, this.width, this.height);
});