Search code examples
htmlcanvascreatejs

HTML5 Canvas Drawing

I have a 100 (width) x 100 (Height) canvas arranged in a row and column of 5 x 6

it has a triangle drawn on them currently the canvas are arranged in such a way that every canvas overlaps each other. i want to add click on the triangle area

is there a way to bypass click to the underlying canvas when the click is in transparent area of the top canvas

Solution

  • With EaselJS, you can use the nextStage property to pass CreateJS mouse interactions to canvases that are below one another in the DOM.

    // Overlapping Canvases
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

// Multiple Stages
stage1 = new createjs.Stage("canvas1"),
  stage2 = new createjs.Stage("canvas2");

// Mouse events on content in each stage
stage1child.on("click", handleClick);
stage2child.on("click", handleClick);

// Stage 2 is higher in the DOM, so it will receive the mouse events first.
// Pass them on to the lower canvas/stage
stage2.nextStage = stage1;

    Here is more info: