Suppose I have drawn a green rectangle and then a blue rectangle over it. I want to draw a circular hole in the blue rectangle so that the green rectangle underneath is visible through the hole.
I have tried using destination-out
but it clears all shapes underneath:
const ctx = document.querySelector("#canvas").getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(0, 0, 50, 100); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 50, 50); ctx.globalCompositeOperation = "destination-out"; ctx.beginPath(); ctx.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2); ctx.fill(); ctx.globalCompositeOperation = "source-over";
<canvas id="canvas" width="500" height="200" style="background: black" ></canvas>
Create second canvas, add your blue rectangle to it, cut out circle and than merge it into first canvas:
const ctx = document.querySelector("#canvas").getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(0, 0, 50, 100); const canvasTemp = document.createElement("canvas"); const ctxTemp = canvasTemp.getContext("2d"); ctxTemp.fillStyle = "blue"; ctxTemp.fillRect(0, 0, 50, 50); ctxTemp.globalCompositeOperation = "destination-out"; ctxTemp.beginPath(); ctxTemp.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2); ctxTemp.fill(); ctxTemp.globalCompositeOperation = "source-over"; ctx.drawImage(canvasTemp, 0, 0);
<canvas id="canvas" width="500" height="200" style="background: black" ></canvas>
To draw behind the current content use the destination-over
composite mode:
const ctx = document.querySelector("#canvas").getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 50, 50); ctx.globalCompositeOperation = "destination-out"; ctx.beginPath(); ctx.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2); ctx.fill(); ctx.globalCompositeOperation = "destination-over"; ctx.fillStyle = "green"; ctx.fillRect(0, 0, 50, 100);
<canvas id="canvas" width="500" height="200" style="background: black" ></canvas>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.