Clickbale Areas

shows area detection

by rudigerkidd

HTML

<p>Left: original image with user#1 painting</p>
<p>Mid: user#1 painting only (used for hit-testing)</p>
<p>Right: user#2 (move mouse over hit areas)</p>
<p>When user#2 hits (on right), the center painting turns red</p>
<canvas id="canvas" width=140 height=140></canvas>
<canvas id="hit" width=140 height=140></canvas>
<canvas id="user2" width=140 height=140></canvas>

CSS

body {
    background-color: ivory;
    padding:5px;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var hit = document.getElementById("hit");
var hitCtx = hit.getContext("2d");
var user2 = document.getElementById("user2");
var ctx2 = user2.getContext("2d");

var canvasOffset = $("#user2").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var imageDataData;
var hitWidth = hit.width;

var img = document.createElement("img");
img.onload = function () {

    // left canvas: image+user#1 paintings
    ctx.globalAlpha = .25;
    ctx.drawImage(img, 0, 0);
    ctx.globalAlpha = 1.00;
    scribble(ctx, "black");

    // mid canvas: just user#1 paintings (used for hittests)
    scribble(hitCtx, "black");

    // right canvas: user#2
    ctx2.drawImage(img, 0, 0);

    imageDataData = hitCtx.getImageData(0, 0, hit.width, hit.height).data;

}
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";


function scribble(context, color) {
    context.beginPath();
    context.moveTo(70, 2);
    context.lineTo(139, 41);
    context.lineTo(70, 41);
    context.closePath();
    context.rect(39, 54, 22, 30);
    context.arc(73, 115, 3, 0, Math.PI * 2, false);
    context.fillStyle = color;
    context.fill();
}


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

    // Put your mousemove stuff here
    var color = "black";
    if (isHit(mouseX, mouseY)) {
        color = "red";
    }
    scribble(hitCtx, color);
}


function isHit(x, y) {
    var pixPos = (x + y * hitWidth) * 4 + 3;
    return (imageDataData[pixPos] > 10)
}


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