Clipping a path
Clipping an image is the concept of picking a part of the image. The part can be of any shape. In this recipe, I am using a circle. The output of the recipe is as shown here:
How to do it
The following is the code for the recipe:
The HTML code:
<html> <head> <title>Image</title> <script src="Clipping.js"></script> </head> <body onload="init();"> <center> <canvas id="MyCanvasArea" width="500" height="500" style="border:2px solid blue;" >your browser does not support canvas</canvas> <h1>Clipping</h1> </center> </body> </html>
The JavaScript code:
var can;
var ctx;
var boyimage;
var x,y;
var imageData;
var imgPixels;
var clipX,clipY,radius;
function init()
{
can = document.getElementById('MyCanvasArea'),
ctx = can.getContext('2d');
x=10;y=10;
var imageObj=new Image();
imageObj.src="ohams.jpg";
imageObj.onload=function()
{
clipX=250;
clipY=100;
radius=70...
