Drawing polygon over image

by Zaid Sheriff

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<header>
			<h1>Canvas Polygon Application</h1>
		</header>
		<div><button onclick="Addpolygon()">Add Polygon Points</button><button onclick="done()">Create Polygon</button><button onclick="AddTexture()">Add Texture</button>
		<div style="position:relative">
			<canvas id="canvas" width="800px" height="800px" style="z-index:10;background-color:transparent;"></canvas>
			<div id="backgroundCanvas" style="width:800px;height:800px"></div>
		</div>

CSS

#backgroundCanvas {
  background-image: url('http://img-aws.ehowcdn.com/default/cme/cme_public_images/www_ehow_com/photos.demandstudios.com/getty/article/149/217/104440723_XS.jpg');
  background-position-x: center;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  position: absolute;
  width: 800px;
  height: 800px;
  left: 0px;
  top: 0px;
  -webkit-user-select: none;
  cursor: default;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
//var canvas = window._canvas = new fabric.Canvas('c');

// ADD YOUR CODE HERE
var canvas = new fabric.Canvas('canvas');
		var polygonCount=1;
		var startDrawingPolygon;
		var ArrayLength;
		var addTexture=false;
		var circleCount=1;
		var fillColor="rgba(46, 240, 56, 0.5)";
		function AddTexture()
		{
			addTexture=true;
			fabric.Image.fromURL('https://image.freepik.com/free-photo/roof-texture_21206171.jpg', function (oImg)  {
		    for(var i=0;canvas.getObjects().length>i;i++)
			{
				if(canvas.getObjects()[i].name=="Polygon")
				{	
					if(canvas.getObjects()[i].type=="normal")
					{
						canvas.getObjects()[i].set(oImg);
					}	
				}
			}
		    canvas.renderAll();
			});
		}
		function done()
		{
			startDrawingPolygon=false;
			ArrayLength=circleCount;
			circleCount=1;
			var tempCount=0;
				window["polygon" + polygonCount] = new fabric.Polygon([{x:0,y:0},{x:0.5,y:0.5}],{fill:fillColor,PolygonNumber:polygonCount,name:"Polygon",type:'normal',noofcircles:ArrayLength});
			canvas.add(window["polygon" + polygonCount]);
			for(var i=0;canvas.getObjects().length>i;i++)
			{
				if(canvas.getObjects()[i].polygonNo===polygonCount)
				{
					var points=window["polygon" + polygonCount].get("points");
					if(canvas.getObjects()[i].circleNo==1)
					{
						points[0].x=canvas.getObjects()[i].left - window["polygon" + polygonCount].get("left");
						points[0].y=canvas.getObjects()[i].top - window["polygon" + polygonCount].get("top");
					}
					else if(canvas.getObjects()[i].circleNo==2)
					{
						points[1].x=canvas.getObjects()[i].left - window["polygon" + polygonCount].get("left");
						points[1].y=canvas.getObjects()[i].top - window["polygon" +...