JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<canvas id="canvas"></canvas>
<br/>
<canvas id="canvas2"></canvas>

CSS

canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
}

JavaScript

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

let img = new Image();
img.src = 'https://styles.redditmedia.com/t5_2s0fe/styles/communityIcon_2cbkzwfs6kr21.png';
img.onload = function() {
  ctx.imageSmoothingQuality = 'low';
  ctx.drawImage(img, 0, 0, 300, 150);
};

const canvas2 = document.getElementById('canvas2');
const ctx2 = canvas2.getContext('2d');

let img2 = new Image();
img2.src = 'https://styles.redditmedia.com/t5_2s0fe/styles/communityIcon_2cbkzwfs6kr21.png';
img2.onload = function() {
  ctx2.imageSmoothingEnabled = true;
  ctx2.imageSmoothingQuality = 'high';
  ctx2.drawImage(img2, 0, 0, 300, 150);
};