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 scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
ctx.font="216px arial";
ctx.fillStyle="white";
ctx.fillText("2",100,200);
ctx.strokeText("2",100,200);
var cw=canvas.width;
var ch=canvas.height;
var imgData=ctx.getImageData(0,0,cw,ch);
var data=imgData.data;
var isDown=false;
var wasInside=true;
var score=0;
function draw(mouseX,mouseY){
var alpha = data[((cw*mouseY)+mouseX)*4+3];
score+=(alpha>19?1:-1);
if(alpha<20 && wasInside){
wasInside=false;
ctx.fillStyle="white";
ctx.fillRect(0,0,cw,ch);
ctx.fillStyle="white";
ctx.fillText("2",100,200);
ctx.strokeText("2",100,200);
}else if(alpha>19 && !wasInside){
wasInside=true;
ctx.fillStyle="white";
ctx.fillRect(0,0,cw,ch);
ctx.fillStyle="green";
ctx.fillText("2",100,200);
ctx.strokeText("2",100,200);
}
}
function handleMouseDown(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var alpha = data[((cw*mouseY)+mouseX)*4+3];
wasInside=(alpha<20);
score=0;
isDown=true;
draw(mouseX,mouseY);
}
function handleMouseUp(e){
e.preventDefault();
isDown=false;
$("#score").text("Score: "+score);
}
function handleMouseOut(e){
e.preventDefault();
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
draw(mouseX,mouseY);
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
$(window).scroll(function(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
});
body{ background-color: white; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag inside the number<br>Number stays green while you're inside.</h4>
<h3 id="score">Score:</h3>
<canvas id="canvas" width=300 height=300></canvas>
