Clipping Path

Clipping Path

By using drawing image method you insert a image in canvas but you do not want to show all parts of the image.By clipping Path you can display certain part of image which is already drawn on the canvas.This is the burz al khalifa hotel in dubai.Firstly we draw this image on our canvas and then we just want to show the building roof and rest of the image will overlap.

Let's go how to do this.

sorry your browser doesnot support canvas tag.

<canvas height="300px" id="cp" width="400px">
sorry your browser doesnot support canvas tag.
</canvas>


<script type="text/javascript">
var sex=document.getElementById("cp");
var sec=sex.getContext("2d");
var img=document.getElementById("clip");
sec.beginPath();
sec.moveTo(10,0);
sec.lineTo(120,50);
sec.lineTo(150,80);
sec.lineTo(170,130);
sec.lineTo(150,150);
sec.lineTo(50,100);
sec.clip();
sec.drawImage(img,10,10);

</script>

Here i give the above image id is clip and got this image and save it to a variable.Then Create a custom shape by using old tools moveTo and lineTo methods.When we draw our boundary then tell the browser now cut rest of the image part by calling clip() method.Play with the line to and move To values and you can find a lot of interesting thing on it.