<!DOCTYPE html>
<html>
<body>
<h2> Implementation of source-atop in CANVAS</h2>
<canvas id="myCanvas" width="500" height="500" style="border:3px solid #FFFF00;"></canvas>
<!--Setting of size of Canvas-->
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;<!--center of x axis-->
var y = canvas.height / 2;<!--center of y axis-->
context.fillStyle='green';
context.fillRect(x-200,y-200,200,200);
context.globalCompositeOperation='source-atop';
context.beginPath();
context.fillStyle='red';
context.fillRect(x-100,y-100,200,200);
</script>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.