JSFiddle - React, Tailwind, and code Playground

by adamhickey00

HTML

Blurry example
<div class="flex">
  <div>
    <img 
      id="img1" 
      src="https://fulfillengine.blob.core.windows.net/images/e44a6a1f-943d-9146-6479-e54280ccb7b3/adamtest3/68a08597-7f83-a9d1-c2b5-2ab8ac66b227-Front-wando-tennis-2022-logo2.png" 
      width="100"
     >
  </div>
  
  <div>
    <canvas id="canvas1"></canvas>
  </div>
</div>

Non-blurry example
<div class="flex">
  <div>
    <img 
      id="img2" 
      src="https://fulfillengine.blob.core.windows.net/images/246d2b70-fd71-420d-8b45-b40e4299fc67/test-pyc.myshopify.com/thumbnail_convertedimage-front-be-kind-rainbow" 
      width="87"
     >
  </div>
  
  <div>
    <canvas id="canvas2"></canvas>
  </div>
</div>

CSS

.flex {
  display: flex;
}

canvas {
  border: 1px solid grey;
  background-color: grey;
}

img {
  background-color: grey;
  margin-right: 10px;
}

JavaScript

function drawImage(canvasId, imageId) {
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext("2d");
  var img = document.getElementById(imageId);

  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0, img.width, img.height);
}

// draw blurry example
drawImage('canvas1', 'img1');

// draw non blurry example
drawImage('canvas2', 'img2');