canvas-hd/index.js

Draw in high definition to a CanvasRenderingContext2D

const addTransform = require('canvas-hidden-transform')

function getPixelRatio(context = document.createElement('canvas').getContext('2d')) {
  const backingStore = context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1;
  return (window.devicePixelRatio || 1) / backingStore;
}

const PIXEL_RATIO = getPixelRatio()

module.exports = function makeHDContext2D(canvas) {
  if (canvas.__drawingInHD === undefined) {
    canvas.__drawingInHD = true
    if (!canvas.style.width)
      canvas.style.width = canvas.width+'px'
    if (!canvas.style.height)
      canvas.style.width = canvas.height+'px'
    canvas.width *= PIXEL_RATIO
    canvas.height *= PIXEL_RATIO
  }
  return addTransform(canvas.getContext('2d'), [PIXEL_RATIO, 0,0, PIXEL_RATIO, 0,0])
}