canvas html blurry code example

Example 1: canvas draw image not blurry

context.imageSmoothingEnabled = false;

Example 2: turn of blur html canvas

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.filter = 'blur(4px)';
ctx.font = '48px serif';
ctx.fillText('Hello world', 50, 100);

Example 3: 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);
}