Retina Canvas Invisible Upscaling

retina-canvas.js

(function(prototype) {
  prototype.getContext = (function(_parent) {
    return function(contextType, contextAttributes) {
      var context = _parent.call(this, contextType, contextAttributes)

      if (contextType != '2d') {
        return context
      }
      if (this.hasAttribute('data-scaled')) {
        return context
      }
      this.setAttribute('data-scaled', true)

      const dpr = window.devicePixelRatio || 1
      const bsr = (
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1
      )

      const ratio = dpr / bsr

      if (dpr == bsr) {
        return context
      }
      
      this.style.width = this.width + 'px'
      this.style.height = this.height + 'px'

      this.width *= ratio
      this.height *= ratio

      context.scale(ratio, ratio)
      return context
    }
  })(prototype.getContext)
})(HTMLCanvasElement.prototype)

gsgajahhshajs