Canvas Black and White Image to Shape

Question

I currently have loaded a simple image onto a canvas.

Its just a white circle with a black background.

What I'm trying to do is convert that white area into a shape. This shape will then be used for boundary detection.

I'm assuming that I need to loop through the image data pixel by pixel? I've done this before for color manipulation, but I'm not sure how I would go about saving this information into "in bounds" and / or "out of bounds".

Other images used will be a bit more complex:

Thanks!

Answer 1

Here's how to use context.getImageData to test if the pixel under the mouse is black or white:

The key is to get the image pixel array and test if any of the red, green or blue components are near 255 (==white if all rgb equal 255)

Example code and a Demo: http://jsfiddle.net/m1erickson/Uw3A4/

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var data;
var $results=$("#results");

var img=new Image();
img.onload=start;
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/temp00.png";

function start(){
    canvas.width=img.width;
    canvas.height=img.height;
    ctx.drawImage(img,0,0);
    data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
}


function handleMouseMove(e){
  e.preventDefault();
  e.stopPropagation();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  var isWhite=(data[(mouseY*canvas.width+mouseX)*4]>200);
  $results.text(isWhite?"Inside":"Outside");

}

$("#canvas").mousemove(function(e){handleMouseMove(e);});

Answer 2

Boundary detection with circles is much easier than that. Just use the distance formula to determine if an object is within the radius of the circle.

d = sqrt((x2 - x1)^2 + (y2-y1)^2)