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

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

canvas {
     border: 3px solid black;
 }
View Compiled
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;

let img = new Image();
img.src = 'https://source.unsplash.com/U5rMrSI7Pn4/600x600';
img.addEventListener('load', () => {
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = 'destination-atop';
  
  // ctx.rect(200, 150, 200, 200);
  // ctx.arc(300, 100, 50, 0, 2 * Math.PI);
  // ctx.fill();
  
  ctx.font = 'bold 132px sans-serif';
  ctx.fillText('SUNRISE', 10, 150)

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.