JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

var ctx = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.src = "https://hsto.org/webt/59/dc/92/59dc92888d798848450986.jpeg";
var pattern = ctx.createPattern(img, "repeat");
ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(246, 10);
ctx.quadraticCurveTo(256, 10, 256, 20);
ctx.lineTo(256, 246);
ctx.quadraticCurveTo(256, 256, 246, 256);
ctx.lineTo(20, 256);
ctx.quadraticCurveTo(10, 256, 10, 246);
ctx.lineTo(10, 20);
ctx.quadraticCurveTo(10, 10, 20, 10);
ctx.fillStyle=pattern;
ctx.fill();
ctx.stroke();