test_subpixel.html

  <canvas id="c" width="600" height="400" style="width: 600px; height: 400px"></canvas>
  <script>
    var c = document.getElementById('c');
    var devicePixelRatio = window.devicePixelRatio || 1;
    var backingStoreRatio = 1;
    var ratio = 1;
    if (devicePixelRatio !== backingStoreRatio) {
      ratio = devicePixelRatio / backingStoreRatio;
      c.width *= ratio;
      c.height *= ratio;
    }

    var ctx = c.getContext('2d');
    ctx.scale(ratio, ratio);
    
    ctx.fillStyle = 'white'
    ctx.fillRect(0,0,50,20);
    ctx.fillStyle = 'black'
    ctx.font = '20px serif';
    ctx.fillText('Test', 0, 18);
    
    var data = ctx.getImageData(0, 0, 50 * ratio, 20 * ratio);
    var scale = 10;
    for (var i = 0; i < data.height; i++) {
      for (var j = 0; j < data.width; j++) {
        var pixelOffset = ((i * data.width) + j) * 4;
        var pixel = [data.data[pixelOffset], data.data[pixelOffset + 1], data.data[pixelOffset + 2], data.data[pixelOffset + 3]];
        ctx.fillStyle = 'rgba(' + pixel[0] + ',' + pixel[1] + ',' + pixel[2] + ',' + (pixel[3] / 255).toFixed(2) + ')';
        if (pixel[0] !== pixel[1] || pixel[0] !== pixel[2]) {
          ctx.strokeStyle = 'green';
        } else if (0 < pixel[0] && pixel[0] < 255) {
          ctx.strokeStyle = 'red';          
        } else {
          ctx.strokeStyle = 'black';          
        }
        ctx.rect(j * scale, i * scale + 50, scale, scale);
        ctx.fill();
        ctx.stroke();
        ctx.beginPath();
      }
    }
  </script>