suranadira-utils/src/canvas.js

Suranadira utilities

// Draw invisible rectangle to allow for events and masking
export const createPath = ({ ctx, properties, invisible }) => {
  let defaults = {
    left: 0,
    top: 0,
    width: 20,
    height: 20
  };

  properties = Object.assign(defaults, properties);

  let path = new Path2D();
  path.rect(
    properties.left,
    properties.top,
    properties.width,
    properties.height
  );
  path.closePath();

  if (!invisible) {
    ctx.beginPath();
    ctx.rect(
      properties.left,
      properties.top,
      properties.width,
      properties.height
    );
    // ctx.fill();
    ctx.stroke();
    ctx.closePath();
  }

  return path;
};

// Get the path index (if any) by a point (x, y)
export const getPathIndex = ({ ctx, paths, x, y }) => {
  let _ret = false;
  try {
    for (let index in paths) {
      if (ctx.isPointInPath(paths[index], x, y)) {
        _ret = index;
        break;
      }
    }
  } catch (e) {
    console.log(e.message);
  }

  return _ret;
};