JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=200 height=158></canvas>

CSS

body {
    background-color: ivory;
    padding:20px;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload = function () {
    ctx.save();
    ctx.drawImage(img, 0, 0);
    ctx.globalCompositeOperation = "xor";
    ctx.beginPath();
    ctx.arc(106, 77, 74, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}
img.src = "http://i.imgur.com/gwlPu.jpg";