how to rescale a canvas in html5 without blurrriness code example

Example: how to rescale a canvas in html5 without blurrriness

//get DPI
let dpi = window.devicePixelRatio;

//get canvas
let canvas = document.getElementById('myCanvas');

//get context
let ctx = canvas.getContext('2d');

function fix_dpi() {
  //get CSS height
  //the + prefix casts it to an integer
  //the slice method gets rid of "px"
  let style_height = 
  +getComputedStyle(canvas).getPropertyValue("height").slice(0, -2);
  
  //get CSS width
  let style_width = 
  +getComputedStyle(canvas).getPropertyValue("width").slice(0, -2);
  
  //scale the canvas
  
  canvas.setAttribute('height', style_height * dpi);
  canvas.setAttribute('width', style_width * dpi);
}