JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

JavaScript

async function drawImage(url) {
	let c = document.createElement('canvas')
  c.width = 600
  c.height = 400
  let ctx = c.getContext("2d");
  let img = new Image();
  await new Promise(r => img.onload=r, img.src=url);
  ctx.fillStyle = 'rgba(36,27,78,1)'
  ctx.fillRect(0,0,600,400)
	ctx.globalCompositeOperation = 'destination-atop'
  ctx.drawImage(img, 0, 0, 600, 400);
  ctx.filter = 'opacity(.7) hue-rotate(-15deg) brightness(.9) sepia(0)'
	ctx.globalCompositeOperation = 'lighten'
  ctx.drawImage(img, 0, 0, 600, 400);
  document.body.appendChild(c)
}

let a = [
 "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/lgbtq-tarot-books-1656347698.png?crop=1.00xw:1.00xh;0,0&resize=1200:*",
 "https://mindbodygreen-res.cloudinary.com/image/upload/c_fill,w_2000,h_1200,g_auto,fl_lossy,f_jpg/org/65l91spwik3ud0l54.jpg",
...