JSFiddle - React, Tailwind, and code Playground

HTML

<img id="source" src="https://dl.dropboxusercontent.com/u/1643240/canvas_artifacts_test_image.png"/>
<br>
<input type="checkbox" id="smoothing"><label for="smoothing">Enable image smoothing</label><br>
<input type="checkbox" id="intermediate"><label for="intermediate">Use intermediate canvas</label><br>
<canvas id="dest1" width="256" height="200"></canvas>
<canvas id="dest2" width="256" height="200"></canvas>

CSS

canvas {
    display:block;

}

JavaScript

function draw() {
    var i = document.getElementById("source");
    if(document.getElementById("intermediate").checked) {
        var c = document.createElement("canvas");
        var ctx = c.getContext("2d");
        ctx.mozImageSmoothingEnabled = 
        ctx.webkitImageSmoothingEnabled = 
        ctx.msImageSmoothingEnabled = false;
        
        ctx.drawImage(i, 1, 1, 128, 128, 1,1,128,128);
        i = c;
    }
    var ctx = document.getElementById("dest1").getContext("2d");
    ctx.width = 256;
    ctx.height = 256;
    ctx.drawImage(i, 1,1,128,128, 50, 50, 128, 128);
    
    ctx = document.getElementById("dest2").getContext("2d");
    ctx.mozImageSmoothingEnabled = 
    ctx.webkitImageSmoothingEnabled = 
    ctx.msImageSmoothingEnabled = 
        document.getElementById("smoothing").checked;
    
    ctx.save();
    ctx.fillStyle = "white";
    ctx.fillRect(0,0,256,256);
    ctx.translate(64, 64);
    ctx.rotate(.7);
    ctx.translate(-64, -64);
    ctx.drawImage(i, 1,1,128,128, 64, 0, 128, 128);
    ctx.restore();
}

draw();

document.getElementById("smoothing").addEventListener("click", draw);
document.getElementById("intermediate").addEventListener("click", draw);