JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=32" />
<canvas></canvas>

CSS

canvas{
   image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

JavaScript

var sourceimage = document.querySelector('img');
var canvas = document.querySelector('canvas');
canvas.height = 0;
canvas.width = 0;
var context = canvas.getContext('2d');
var scalex = 6;
var scaley = 6;
var imgwidth = sourceimage.offsetWidth;
var imgheight = sourceimage.offsetHeight;
canvas.width = imgwidth;
canvas.height = imgheight;
context.drawImage(sourceimage, 0, 0);
canvas.style.width = imgwidth * scalex + "px";
canvas.style.height = imgheight * scaley + "px";