холст html5, щелкающий по обнаружению формы пути Безье

Я сделал учебник, который использует второй невидимый холст для выбора объектов/тестирования попаданий. Нарисуйте все фигуры, одну за другой, на втором холсте, пока на одной из них не появится черный пиксель в месте расположения мыши. Значит, вы нашли объект!

Вот немного из руководства, которое я написал о выборе объектов с помощью canvas:

  // gctx is ghost context, made from the second canvas
  // clear(gctx)

  // ...

  // run through all the boxes
  var l = boxes.length;
  for (var i = l-1; i >= 0; i--) {
    // draw shape onto ghost context
    drawshape(gctx, boxes[i], 'black', 'black');

    // get image data at the mouse x,y pixel
    var imageData = gctx.getImageData(mx, my, 1, 1);
    var index = (mx + my * imageData.width) * 4;

    // if the mouse pixel exists, select and break
    if (imageData.data[3] > 0) {
      mySel = boxes[i];
      offsetx = mx - mySel.x;
      offsety = my - mySel.y;
      mySel.x = mx - offsetx;
      mySel.y = my - offsety;
      isDrag = true;
      canvas.onmousemove = myMove;
      invalidate();
      clear(gctx);
      return;
    }

  }

В моем полном демо используются только прямоугольники, но в более поздней версии я буду использовать круги/контуры/текст.

Если вы хотите посмотреть демо и мой полный код, он находится здесь.