JSFiddle - React, Tailwind, and code Playground

by jrm2k6

HTML

<div id='canvas-container'>
  <canvas id='canvas'></canvas>
</div>

CSS

#canvas-container {
  width: 600px;
  height: 600px;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

#canvas {
  width: 590px;
  height: 590px;
  border: 1px solid green;
}

JavaScript

const context = document.getElementById('canvas').getContext('2d');
const img = new Image();

console.log(context);
img.onload = function() {
  console.log('jajaj');
	context.drawImage(img, 0, 0, img.width, img.height, 0, 0, 590, 590);
}

img.src = 'https://placekitten.com/800/800';