JSFiddle - React, Tailwind, and code Playground

by Samuel GuimarĂŁes

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript 1.7

// const url = "http://placekitten.com/200/200";
const url = 'https://s3.us-east-1.amazonaws.com/geenee-staging-saas-medium-upload/media/a8ed6ee8-2432-42ed-9f81-131fcffc5987/image.original.jpg'
const can = document.getElementById('canvas1');
const ctx = can.getContext('2d');

const loadImage = (src) => new Promise((resolve, reject) => {
  let img = new Image();
  img.onerror = () => reject(new Error(`Could not retrieve image from ${src}.`));
  img.crossOrigin = 'anonymous';
  img.src = src;
  if (img.complete || img.width > 0 || img.height > 0) {
    resolve(img);
  } else {
    img.onload = () => resolve(img);
  }
});

loadImage(url)
  .then((img) => {
    const {
      width,
      height,
      src
    } = img;
    console.log(src);
    can.width = width;
    can.height = width;
    ctx.drawImage(img, 0, 0);
  })
  .catch((error) => {
    console.error(error);
  });