Crisp Pixel Art on Retina Screens (Vanilla)

Crisp Pixel Art on Retina Screens, without jQuery.

by Matthew Callis

HTML

<img src="http://i.minus.com/iSjcFTESUYCcS.png" id="before" alt="Before" title="Before">

<pre id="log"></pre>

CSS

canvas, img {
    border: 3px solid #ddd;
    image-rendering: optimizeSpeed;
    image-rendering: -o-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: optimize-contrast;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated; /* CSS4 */
    -ms-interpolation-mode: nearest-neighbor;
}

JavaScript

/*!
 * retinize.js v1.0 - Retinize will upscale (using nearest neighbor) images to look correctly on retina screens.
 * Copyright (c) 2013 Matthew Callis - https://github.com/MatthewCallis/retinize
 * License: MIT
 */
(function(global) {
  'use strict';
  /**
   * @constructor
   * @param {DOMElement} element the image element
   * @param {Object} options options for the widget
   */
  function Retinize(element, options){
    options = options || Retinize.options;

    this.element     = element;
    this.forceCanvas = options.offset;
    this.browser     = { chrome: false, mozilla: false, opera: false, msie: false, safari: false };
  }
  Retinize.prototype = {
    constructor : Retinize,
    /**
     * Initialises the widget
     */
    init: function(){
      // Return if we don't support devicePixelRatio
      if(!window.devicePixelRatio){
        return;
      }
      // Return if we don't need retina support
      if(window.devicePixelRatio === 1){
        return;
      }
      if(!this.element){
        return;
      }
      if(!this.element.length){
        return;
      }
      // Browser support
      var ua = navigator.userAgent;
      for(var c in this.browser){
        this.browser[c] = ((new RegExp(c, 'i').test(ua))) ? true : false;
        if(this.browser.mozilla && c === 'mozilla'){
          this.browser.mozilla = ((new RegExp('firefox', 'i').test(ua))) ? true : false;
        }
        if(this.browser.chrome && c === 'safari'){
          this.browser.safari = false;
        }
      }
      // Actually convert or style the elements.
      for(var i = 0, l = this.element.length; i < l; i++){
        if(this.forceCanvas === true || this.browser.mozilla || this.browser.chrome){
          this.convertToCanvas(this.element[i]);
        }
        else{
          if(this.browser.safari){
            this.element[i].style['image-rendering'] = '-webkit-optimize-contrast';
            this.element[i].style['image-rendering'] = 'pixelated';
          }
     ...