Add ability to black out certain sections of the image

README.md

@@ -8,4 +8,6 @@ on which points may be added to create a polygon.
 Activates inputs with class `canvas-area` and data attribute
 `data-image-url`. Or activate with `$('input').canvasAreaDraw(options)`
 
+Add Black out sections - use data attribute data-blackout and specify points in comma separated sets separated by semi-colons
+
 Demo at [http://iakob.com/canvas-area-draw/demo.html]

demo.html

@@ -18,7 +18,8 @@ <h1>Image Maps Canvas Drawing</h1>
       <h2> Image 1 </h2>
       <textarea rows=3 name="coords1" class="canvas-area input-xxlarge" disabled 
         placeholder="Shape Coordinates" 
-        data-image-url="http://farm8.staticflickr.com/7259/6956772778_2fa755a228.jpg">208,221,208,202,198,199,201,191,218,176,229,155,221,132,196,117,169,131,157,158,163,172,177,164,173,180,190,185,192,199,187,201,185,222</textarea>
+        data-image-url="http://farm8.staticflickr.com/7259/6956772778_2fa755a228.jpg"
+		data-blackout="150,396,114,371,111,363,102,363,93,348,95,334,102,330,100,319,105,304,124,287,133,287,141,283,154,279,181,283,198,291,211,316,207,324,209,332,208,348,201,354,206,366,195,370,183,385,160,385">208,221,208,202,198,199,201,191,218,176,229,155,221,132,196,117,169,131,157,158,163,172,177,164,173,180,190,185,192,199,187,201,185,222</textarea>
       </div>
       <div class="span6">
       <h2> Image 2 </h2>
@@ -31,6 +32,6 @@ <h2> Image 2 </h2>
     </div>
     <script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
-    <script language="javascript" src="jquery.canvasAreaDraw.min.js"></script>
+    <script language="javascript" src="jquery.canvasAreaDraw.js"></script>
   </body>
 </html>

jquery.canvasAreaDraw.js

@@ -10,12 +10,13 @@
 
   var init = function(index, input, options) {
 
-    var points, activePoint, settings;
+    var points, blackoutpoints, activePoint, settings;
     var $reset, $canvas, ctx, image;
-    var draw, mousedown, stopdrag, move, resize, reset, rightclick, record;
+    var draw, drawblackout, mousedown, stopdrag, move, resize, reset, rightclick, record;
 
     settings = $.extend({
-      imageUrl: $(this).attr('data-image-url')
+      imageUrl: $(this).attr('data-image-url'),
+	  blackout: $(this).attr('data-blackout')
     }, options);
 
     if ( $(this).val().length ) {
@@ -25,6 +26,17 @@
     } else {
       points = [];
     }
+
+	// process blackout points if any
+    if ( settings.blackout != undefined && settings.blackout.length > 0 ) {
+      blackoutpoints = settings.blackout.split(';').map(function(pointstr) {
+        return pointstr.split(',').map(function(point) {
+          return parseInt(point, 10);
+		});
+      });
+    } else {
+      blackoutpoints = [];	
+    }
 
     $reset = $('<button type="button" class="btn"><i class="icon-trash"></i>Clear</button>');
     $canvas = $('<canvas>');
@@ -155,13 +167,38 @@
           ctx.lineTo(points[i], points[i+1]);
         }
       }
-      ctx.closePath();
+	  ctx.closePath();
       ctx.fillStyle = 'rgba(255,0,0,0.3)';
       ctx.fill();
       ctx.stroke();
-
+
+	  drawblackout();
+
       record();
     };
+
+	drawblackout = function() {
+      if (blackoutpoints.length == 0) {
+        return false;
+      }
+      ctx.globalCompositeOperation = 'destination-over';
+      ctx.lineWidth = 1;
+
+	  for (var i = 0; i < blackoutpoints.length; i++) {
+        if (blackoutpoints[i].length >= 2) {
+		  ctx.beginPath();
+		  ctx.moveTo(blackoutpoints[i][0], blackoutpoints[i][1]);
+          for (var j = 0; j < blackoutpoints[i].length; j+=2) {
+            if (blackoutpoints[i].length > 2 && j > 1) {
+              ctx.lineTo(blackoutpoints[i][j], blackoutpoints[i][j+1]);
+            }
+          }
+		  ctx.closePath();
+		  ctx.fillStyle = 'rgba(0,0,0,1.0)';
+          ctx.fill();
+		}
+	  }
+    };
 
     record = function() {
       $(input).val(points.join(','));