canvas cut path to image

1// canvas related variables
2var canvas=document.getElementById("canvas");
3var ctx=canvas.getContext("2d");
4var cw,ch;
5var $canvas=$("#canvas");
6var canvasOffset=$canvas.offset();
7var offsetX=canvasOffset.left;
8var offsetY=canvasOffset.top;
9
10// set some canvas styles
11ctx.strokeStyle='black';
12
13// an array to hold user's click-points that define the clipping area
14var points=[];
15
16// load the image 
17var img=new Image();
18img.crossOrigin='anonymous';
19img.onload=start;
20img.src="https://dl.dropboxusercontent.com/u/139992952/multple/houses1.jpg";
21function start(){
22
23  // resize canvas to fit the img
24  cw=canvas.width=img.width;
25  ch=canvas.height=img.height;
26
27  // draw the image at 25% opacity
28  drawImage(0.25);
29
30  // listen for mousedown and button clicks
31  $('#canvas').mousedown(function(e){handleMouseDown(e);});
32  $('#reset').click(function(){ points.length=0; drawImage(0.25); });
33}
34
35
36
37function handleMouseDown(e){
38
39  // tell the browser that we're handling this event
40  e.preventDefault();
41  e.stopPropagation();
42
43  // calculate mouseX & mouseY
44  mx=parseInt(e.clientX-offsetX);
45  my=parseInt(e.clientY-offsetY);
46
47  // push the clicked point to the points[] array
48  points.push({x:mx,y:my});
49
50  // show the user an outline of their current clipping path
51  outlineIt();
52
53  // if the user clicked back in the original circle
54  // then complete the clip
55  if(points.length>1){
56    var dx=mx-points[0].x;
57    var dy=my-points[0].y;
58    if(dx*dx+dy*dy<10*10){
59      clipIt();
60    }
61  }
62}
63
64
65// redraw the image at the specified opacity
66function drawImage(alpha){
67  ctx.clearRect(0,0,cw,ch);
68  ctx.globalAlpha=alpha;
69  ctx.drawImage(img,0,0);
70  ctx.globalAlpha=1.00;
71}
72
73// show the current potential clipping path
74function outlineIt(){
75  drawImage(0.25);
76  ctx.beginPath();
77  ctx.moveTo(points[0].x,points[0].y);
78  for(var i=0;i<points.length;i++){
79    ctx.lineTo(points[i].x,points[i].y);
80  }
81  ctx.closePath();
82  ctx.stroke();
83  ctx.beginPath();
84  ctx.arc(points[0].x,points[0].y,10,0,Math.PI*2);
85  ctx.closePath();
86  ctx.stroke();
87}
88
89// clip the selected path to a new canvas
90function clipIt(){
91
92  // calculate the size of the user's clipping area
93  var minX=10000;
94  var minY=10000;
95  var maxX=-10000;
96  var maxY=-10000;
97  for(var i=1;i<points.length;i++){
98    var p=points[i];
99    if(p.x<minX){minX=p.x;}
100    if(p.y<minY){minY=p.y;}
101    if(p.x>maxX){maxX=p.x;}
102    if(p.y>maxY){maxY=p.y;}
103  }
104  var width=maxX-minX;
105  var height=maxY-minY;
106
107  // clip the image into the user's clipping area
108  ctx.save();
109  ctx.clearRect(0,0,cw,ch);
110  ctx.beginPath();
111  ctx.moveTo(points[0].x,points[0].y);
112  for(var i=1;i<points.length;i++){
113    var p=points[i];
114    ctx.lineTo(points[i].x,points[i].y);
115  }
116  ctx.closePath();
117  ctx.clip();
118  ctx.drawImage(img,0,0);
119  ctx.restore();
120
121  // create a new canvas 
122  var c=document.createElement('canvas');
123  var cx=c.getContext('2d');
124
125  // resize the new canvas to the size of the clipping area
126  c.width=width;
127  c.height=height;
128
129  // draw the clipped image from the main canvas to the new canvas
130  cx.drawImage(canvas, minX,minY,width,height, 0,0,width,height);
131
132  // create a new Image() from the new canvas
133  var clippedImage=new Image();
134  clippedImage.onload=function(){
135    // append the new image to the page
136    document.body.appendChild(clippedImage);
137  }
138  clippedImage.src=c.toDataURL();
139
140
141  // clear the previous points 
142  points.length=0;
143
144  // redraw the image on the main canvas for further clipping
145  drawImage(0.25);
146}