A simple clipping region

by Grzegorz Matyszewski

HTML

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

JavaScript

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;

// draw a line just to demonstrate the transparency later
context.beginPath();
context.moveTo(0, height/2);
context.lineTo(width, height/2);
context.lineWidth = 3;
context.strokeStyle = "#f00";
context.stroke();

// draw a circle with a hole in it
context.beginPath();
context.arc(width/8, height/2, height*3/8, 0, 2*Math.PI);
context.arc(width/8, height/2, height*1/8, 0, 2*Math.PI, true);
context.fillStyle = "#555";
context.fill();

// draw a rectangle with a hole in it
context.beginPath();
context.moveTo(width/4, height/4);
context.lineTo(width/2, height/4);
context.lineTo(width/2, height/4*3);
context.lineTo(width/4, height/4*3);
context.lineTo(width/4, height/4);
context.arc(width/8*3, height/2, height*1/8, 0, 2*Math.PI, true);
context.fillStyle = "#555";
context.fill();

// draw a rectangle with a star-hole in it
/*context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, height);
context.lineTo(width, height);
context.lineTo(width, 0);
context.lineTo(0, 0);
context.fillStyle = "#555";
const p = new Path2D('M 262.6 182.4 C 261.7 179.7 259.3 177.7 256.4 177.2 C 245.3 175.7 234.3 174.1 223.3 172.5 C 218.4 162.7 213.4 152.8 208.5 143 C 207.2 140.4 204.5 138.7 201.5 138.7 C 198.6 138.7 195.9 140.4 194.6 143 C 189.7 152.8 184.7 162.7 179.8 172.5 C 168.8 174.1 157.8 175.7 146.7 177.2 C 143.8 177.6 141.4 179.7 140.5 182.4 C 139.6 185.2 140.3 188.2 142.4 190.3 C 150.4 197.9 158.4 205.6 166.4 213.3 C 164.5 224.1 162.6 234.9 160.7 245.7 C 160.2 248.6 161.4 251.5 163.8 253.2 C 165.1 254.1 166.7 254.6 168.4 254.6 C 169.6 254.6 170.8 254.3 172 253.8 C 181.8 248.6 191.7 243.5 201.5 238.4 C 211.4 243.5 221.3 248.6 231.1 253.8 C 232.3 254.3 233.5 254.6 234.7 254.6 C 236.3 254.6 237.9 254.1 239.3 253.2 C 241.7 251.5 242.9 248.6 242.4 245.7 C 240.5 234.9 238.6 224.1 236.7 213.3 C 244.7 205.6 252.7 197.9 260.7 190.3 C 262.8...