image-rendering-pixelated

by redky

HTML

<h2>&lt;img&gt;</h2>
  <div>
    <img class="pixly">
    <img>
  </div>

  <h2>&lt;canvas&gt;</h2>
  <div>
    <canvas class="pixly"></canvas>
    <canvas></canvas>
  </div>

  <h2>background-image</h2>
  <div>
    <span class="bgimg pixly"></span>
    <span class="bgimg"></span>
  </div>

CSS

.pixly
{
 image-rendering: pixelated;
}

img, canvas, span { width: 100px; height: 100px; }
span { display: inline-block; }
.bgimg
{
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVR42mNgYGD4z4AE/gMADwMB/+56SD4AAAAASUVORK5CYII=);
 background-size: contain;
}

JavaScript

var cnvs = document.getElementsByTagName('canvas'),
    imgs = document.getElementsByTagName('img'),
    bgs = document.getElementsByTagName('span'),
    div = document.createElement('div');

for (var i = 0; i < cnvs.length; ++i) {
    var c = cnvs[i].getContext('2d');
    c.canvas.width = 2;
    c.canvas.height = 2;

    c.fillRect(0, 0, 1, 1);
    c.fillRect(1, 1, 1, 1);

    imgs[i].src = c.canvas.toDataURL('image/png');
}


div.innerHTML = '<p><b>Image uses:</b> ' + window.getComputedStyle(imgs[0], null).imageRendering + '/' + window.getComputedStyle(imgs[1], null).imageRendering + '</p><p><b>Canvas uses:</b> ' + window.getComputedStyle(cnvs[0], null).imageRendering + '/' + window.getComputedStyle(cnvs[1], null).imageRendering + '</p><p><b>Background uses:</b> ' + window.getComputedStyle(bgs[0], null).imageRendering + '/' + window.getComputedStyle(bgs[1], null).imageRendering + '</p>';

document.body.appendChild(div);