Как выбрать формы холста HTML5?

Попробуйте использовать существующую библиотеку холста (или создайте свою), у которой есть событие, когда выбирается фигура.

В приведенном ниже примере используется кинетическая JS-библиотека, а в приведенном ниже примере используется Пример событий области холста HTML5:

var triangle = new Kinetic.Shape(function(){
    var context = this.getContext();
    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = "black";
    context.fillStyle = "#00D2FF";
    context.moveTo(120, 50);
    context.lineTo(250, 80);
    context.lineTo(150, 170);
    context.closePath();
    context.fill();
    context.stroke();
});

triangle.on("mouseout", function(){
    writeMessage(messageLayer, "Mouseout triangle");
});

triangle.on("mousemove", function(){
    var mousePos = stage.getMousePosition();
    var x = mousePos.x - 120;
    var y = mousePos.y - 50;
    writeMessage(messageLayer, "x: " + x + ", y: " + y);
});

shapesLayer.add(triangle);

var circle = new Kinetic.Shape(function(){
    var canvas = this.getCanvas();
    var context = this.getContext();
    context.beginPath();
    context.arc(380, canvas.height / 2, 70, 0, Math.PI * 2, true);
    context.fillStyle = "red";
    context.fill();
    context.lineWidth = 4;
    context.stroke();
});

circle.on("mouseover", function(){
    writeMessage(messageLayer, "Mouseover circle");
});
circle.on("mouseout", function(){
    writeMessage(messageLayer, "Mouseout circle");
});
circle.on("mousedown", function(){
    writeMessage(messageLayer, "Mousedown circle");
});
circle.on("mouseup", function(){
    writeMessage(messageLayer, "Mouseup circle");
});

shapesLayer.add(circle);

stage.add(shapesLayer);
stage.add(messageLayer);

In addition, I have included some mouse-in detection if the cursor is within the shape, without using any javascript libraries.

Обнаружение мыши на прямоугольной основе:

function isCursorWithinRectangle(x, y, width, height, mouseX, mouseY) {
    if(mouseX > x && mouseX < x + width && mouseY > y && mouseY < y + height) {
        return true;
    }
    return false;
}

Обнаружение наведения указателя мыши на кружок:

function isCursorWithinCircle(x, y, r, mouseX, mouseY) {
    var distSqr = Math.pow(x - mouseX, 2) + Math.pow(y - mouseY, 2);

    if(distSqr < r * r) {
        return true;
    }
    return false;
}

Canvas не имеет интерфейса для элементов на нем, как DOM. Он используется исключительно для рисования.

Вам нужно создать свои активы как объекты и использовать цикл рисования, чтобы раскрасить их. Затем вы забываете об элементе canvas, вы работаете со своими объектами, с их смещениями и т. Д.

Существует очень простой способ выбора сложных форм с точностью до пикселя, который не требует ограничивающих прямоугольников или математических вычислений.

Идея состоит в том, что вы дублируете все свои формы на скрытом вторичном холсте, где вы назначаете каждой форме уникальный цвет. Когда вы выполняете событие наведения мыши или щелчка на исходном холсте, вы сохраняете координаты мыши (x, y) относительно видимого холста, а затем просматриваете цвет пикселя на скрытом холсте, используя те же координаты. Поскольку каждая фигура имеет уникальный цвет на скрытом холсте, этот цвет соответствует точной форме, выбранной пользователем.

Обратите внимание, что это поддерживает только до примерно 16,7 миллиона форм, потому что RGB имеет только 24 бита цвета, но этого должно быть более чем достаточно.

Вот простой пример с использованием D3 и Canvas: http://bl.ocks.org/syntagmatic/6645345