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);
}

www.codegrepper.com
www.stackoverflow.com