JSFiddle - React, Tailwind, and code Playground

by nimareq

HTML

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

CSS

canvas {
    background-color: #f0f0f0;
}

JavaScript

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

var w = canvas.width;
var h = canvas.height;

// cdraw a cross
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(w, h);
ctx.moveTo(w, 0);
ctx.lineTo(0, h);
ctx.stroke();

// draw a circle and clip to it
ctx.beginPath();
ctx.rect(50,50,50,50);
ctx.stroke();
ctx.clip();


// clear the contents of the circle - erases the center of the cross
ctx.clearRect(0, 0, w, h);

// draw horizontal lines across the whole canvas, but clipped to the circle
ctx.beginPath();
for (var y = 0; y < h; y += 10) {
    ctx.moveTo(0, y);
    ctx.lineTo(w, y);
}
ctx.stroke();