<!DOCTYPE html>
<html>
<body>
<span>Without clip():</span>
<canvas id="myCanvas" width="300" height="300" style="border:4px solid #FFFF00;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var context= c.getContext("2d");
context.rect(50, 50, 200, 200);
context.stroke();
context.fillStyle = "green";
context.fillRect(10, 10, 150, 100);
context.fillStyle = "red";
context.fillRect(150,150,140,140);
context.fillStyle = "blue";
context.fillRect(10,130,110,140);
context.fillStyle = "magenta";
context.fillRect(180,10,110,130);
</script>
<span>With clip():</span>
<canvas id="myCanvas2" width="300" height="300" style="border:4px solid #FFFF00;">
</canvas>
<script>
var c = document.getElementById("myCanvas2");
var context = c.getContext("2d");
context.rect(50, 50, 200, 200);
context.stroke();
context.clip();
context.fillStyle = "green";
context.fillRect(10, 10, 150, 100);
context.fillStyle = "red";
context.fillRect(150,150,140,140);
context.fillStyle = "blue";
context.fillRect(10,130,110,140);
context.fillStyle = "magenta";
context.fillRect(180,10,110,130);
</script>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.