Image Maps-B10 COLOR

All Pixels Captured

by dixalex

HTML

<img id='B10COLOR' src='https://cvs.opinioninsight.com/panel/files/1/B10_COLOR_IMG.jpg' />
<canvas id="myCanvas" width="658" height="208">
Your browser does not support the HTML5 canvas tag.
</canvas>

CSS

img {
  width: 658px; 
  height: 208px;
  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=[ 66,16, 17,122, 29,185, 171,184, 162,121, 176,16 ];
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);