<!DOCTYPE html>
<html>
<head>
<title>Canvas Compositing Tutorial</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid"></canvas> <br>
<button onclick="performComposite()">Perform Composite</button> <br>
<p>Expected Result : </p>
<canvas id="myResultCanvas" width="200" height="200" style="border: 1px solid"></canvas>
<script type="text/javascript">
// First Canvas
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
function performComposite() {
ctx.globalCompositeOperation = "source-atop";
};
ctx.fillStyle = "blue";
ctx.arc(110, 110, 80, 0 * Math.PI, 2 * Math.PI);
ctx.fill();
// Second Canvas
let myResultCanvas = document.getElementById('myResultCanvas');
let resultCtx = myResultCanvas.getContext('2d');
resultCtx.fillStyle = "red";
resultCtx.fillRect(10, 10, 100, 100);
resultCtx.globalCompositeOperation = "source-atop";
resultCtx.fillStyle = "blue";
resultCtx.arc(110, 110, 80, 0 * Math.PI, 2 * Math.PI);
resultCtx.fill();
</script>
<br/>
</body>
</html>
After clicking the button, the globalCompositeOperation is not working...how can i do that for the expected answer?
The expected answer is in the second canvas or second image...
Why is it not working...?