canvas-hidpi-optimization.js

var canvas = document.querySelector('.myCanvas');
var ctx = canvas.getContext('2d');

var
  canvasWidth = 400,
  canvasHeight = 300;

// Calculate how much more pixels are needed
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;

// Assign the number of needed pixels
canvas.width = canvasWidth * ratio;
canvas.height = canvasHeight * ratio;

// Assign the actual number of CSS pixels
canvas.style.width = elW + 'px';
canvas.style.height = elH + 'px';

// Scale everything that will be drawn later
ctx.scale(ratio, ratio);