<!DOCTYPE html>
<style>
    img {
        display: none;
    }
    canvas {
        width: 100px;
        height: 100px;
        image-rendering: pixelated;
    }
</style>
<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=">
    <!-- Test that drawing a pixelated canvas with another pixelated canvas as source works. -->
    <!-- Both canvases should be upscaled without blurring. -->
    <canvas class="canvas0" width="4" height="4"></canvas>
    <canvas class="canvas1" width="4" height="4"></canvas>
</body>
<script>
    function drawToCanvas(canvas) {
        var ctx = canvas.getContext("2d")
        ctx.drawImage(document.getElementsByTagName("img")[0], 1, 1);
    }

    function draw() {
        var canvas0 = document.getElementsByTagName("canvas")[0];
        var canvas1 = document.getElementsByTagName("canvas")[1];
        drawToCanvas(canvas0);
        canvas1.getContext("2d").drawImage(canvas0, 0, 0);
    }
    window.onload = draw;
</script>