Canvas

by jcspader

HTML

<canvas width="400" heigth="300" />

CSS

canvas{background-color: gray;}

JavaScript

var gDrawingContext = $("canvas")[0].getContext("2d");

// Marca para Click
gDrawingContext.beginPath();
gDrawingContext.arc(50, 50, 10, 0, Math.PI*2, false);
gDrawingContext.closePath();
gDrawingContext.strokeStyle = "red";
gDrawingContext.stroke();

// Marca de ação do mouse
gDrawingContext.beginPath();
gDrawingContext.arc(55, 55, 10, 0, Math.PI*2, false);
gDrawingContext.closePath();
gDrawingContext.strokeStyle = "blue";
gDrawingContext.stroke();

function intersects(x, y, cx, cy, r) {
    var dx = x-cx;
    var dy = y-cy;
    return dx*dx+dy*dy <= r*r;
}
console.clear();
$("canvas").on("click", function (e){
    if (intersects(e.pageX, e.pageY, 55, 55, 10))
        console.info(e.pageX + ", " + e.pageY );
});