Playable code

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation -->

<canvas id="canvas" width="400" height="300" class="playable-canvas"></canvas>

JavaScript

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

ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 200, 40);
ctx.closePath();

ctx.beginPath();
ctx.fillStyle = 'red';
ctx.fillRect(50, 60, 200, 40);
ctx.closePath();

ctx.beginPath();
ctx.rect(10, 10, 200, 40);
ctx.rect(50, 60, 200, 40);
ctx.closePath();


ctx.beginPath();
ctx.clip();

ctx.closePath();



//вывод круга
ctx.globalCompositeOperation = 'multiply';
ctx.beginPath();
ctx.arc(130, 70, 70, 0, 2 * Math.PI);
ctx.fillStyle = 'green';
ctx.fill();