You could save the last "valid" (in white area) x/y for the green dot. If the dot later moves to an invalid area, you could position the dot back to the last valid position.
Example code and a Demo: http://jsfiddle.net/m1erickson/pq7QZ/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
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 PI2=Math.PI*2;
var greenX,greenY,lastValidGreenX,lastValidGreenY;
var data;
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.fillStyle="green";
ctx.drawImage(img,0,0);
data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}
function handleMouseMove(e){
e.preventDefault();
e.stopPropagation();
greenX=parseInt(e.clientX-offsetX);
greenY=parseInt(e.clientY-offsetY);
var isWhite=(data[(greenY*canvas.width+greenX)*4]>200);
if(isWhite){
lastValidGreenX=greenX;
lastValidGreenY=greenY;
}else{
greenX=lastValidGreenX;
greenY=lastValidGreenY;
}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.arc(greenX,greenY,3,0,PI2);
ctx.closePath();
ctx.fill()
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>