JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<canvas id="canvas"></canvas>

JavaScript

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

const img = new Image()
img.addEventListener('load', () => {
  ctx.drawImage(img, 0, 0)
  
  ctx.rotate(0.5)
  ctx.fillStyle = 'white'
	ctx.lineWidth = 10
  ctx.textBaseline = 'hanging'
  ctx.font = '48px serif'
  ctx.globalAlpha = 0.2
  ctx.strokeText('Hello World', 5, 5)
  ctx.fillText('Hello World', 5, 5)

  ctx.strokeText('Hello World', 50, 50)
  ctx.fillText('Hello World', 50, 50)

}, false)
img.src = 'https://i.imgur.com/gB9t8kx.jpeg'