Image Maps-B10 ALT COLOR

All Pixels Captured

by dixalex

HTML

<img id='B10COLOR' src='https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&amp;File=B10_ATL_COLOR_IMG_FANCY.jpg' />
<canvas id="myCanvas" width="850" height="269">
Your browser does not support the HTML5 canvas tag.
</canvas>

CSS

img {
  width: 850px; 
  height: 269px;
  padding:0;
  margin:0;
  position: relative;
}
canvas{border: none; margin:0; padding; border: solid 1px #000;}
body{margin: 0; padding:0;}
div{overflow:visible; width:0px; height:0px; margin: 0; padding:0; display:block;}

JavaScript

//Coords: 66,16,17,122,29,185,171,184,162,121,176,16
    //var c = document.getElementById("myCanvas");
    //var ctx = c.getContext("2d");
    
    //var imgData = ctx.getImageData(66,16,17,122,29,185,171,184,162,121,176,16);
    //ctx.putImageData(imgData, 0, 0);
		
    //ctx.fillStyle = "red";
    //ctx.fillPoly(66,16,17,122,29,185,171,184,162,121,176,16);
    
    //poly [x,y, x,y, x,y.....];
var poly=[ 514,17,516,140,522,249,690,244,684,138,664,14 ];
var canvas=document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255,0,0)";

ctx.beginPath();
ctx.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 ){ctx.lineTo( poly[item] , poly[item+1] );}
//var img = document.getElementById("B10COLOR");
//ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.fill();

console.log(canvas.width);
var arrayHolder = "";
var index = (x + y * ctx.width) * 4;   
var imageData = ctx.getImageData(0, 0,canvas.width, canvas.height);
  var data = imageData.data;
  var filled=[];
  for(var x=0;x<canvas.width;x++){
  for(var y=0;y<canvas.height;y++){
    var index = (x + y * imageData.width) * 4;
    if(data[index+0]=="255" && data[index+1]=="0" && data[index+2]=="0"){
        var cx={"X":x,"Y":y}; //
        $('body').append("<div style='color: #ACE; position: absolute; left:" + x + "px; top:" + y + "px;'>.</div>");
        filled.push(cx);
    }
  }
  }

console.log("X-Y Array: " + console.log(JSON.stringify(filled)));
console.log("X-Y Canvas Coordinates: " + data);