Canvas + Click

Beispiel für Interaktion mit dem Canvas-Tag.

HTML

<p>Click here:</p>

<canvas id="c"></canvas>

CSS

#c { 
    background-color: white 
}
body {
    background-color: #ddd;
}

JavaScript

var my_canvas = document.getElementById("c");
var my_context = my_canvas.getContext("2d");

my_canvas.width = 250;
my_canvas.height = 250;


function handleClick(e) {
    var x = e.pageX - my_canvas.offsetLeft;
    var y = e.pageY - my_canvas.offsetTop;

    my_context.fillRect(x - 3, y, 7, 1);
    my_context.fillRect(x, y - 3, 10, 70);

}

my_canvas.addEventListener("click", handleClick, false);