Clip
In this chapter you will learn:
How to clip a region
The clip method:
| Name | Description | Returns |
|---|---|---|
| clip() | Creates a new clipping region | void |
The following code clips a region.
<!DOCTYPE HTML><!-- jav a 2s .c om-->
<html>
<head>
<style>
canvas {
border: thin solid black
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.rect(20, 20, 500, 140);
ctx.fill();
ctx.beginPath();
ctx.rect(100, 20, 300, 100);
ctx.clip();
ctx.fillStyle = "red";
ctx.beginPath();
ctx.rect(0, 0, 500, 140);
ctx.fill();
</script>
</body>
</html>
Next chapter...
What you will learn in the next chapter:
Home » Javascript Tutorial » Canvas