JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="can" width="400" height="400"></canvas>
<button id="scale">scale</button>
<div>Object count under click based on hitArea: <span id="objectCount"></span></div>
JavaScript
var c = document.getElementById("can");
var stage = new createjs.Stage(c);
var shape = new createjs.Shape();
shape.graphics.beginFill("#666666")
.drawPolyStar(50, 50, 50, 6, 0, 30);
var shapeHitArea = new createjs.Shape();
shapeHitArea.graphics.beginFill("#FF0000")
.drawPolyStar(50, 50, 50, 6, 0, 30);
shape.hitArea = shapeHitArea;
stage.addChild(shape);
stage.addEventListener("stagemousedown", function (e) {
stage.addEventListener("stagemousemove", mouseMoveCB);
});
stage.addEventListener("stagemouseup", function (e) {
stage.removeEventListener("stagemousemove", mouseMoveCB);
var objects = stage.getObjectsUnderPoint(e.stageX, e.stageY);
document.getElementById("objectCount").innerHTML = objects.length;
});
stage.update();
document.getElementById("scale").addEventListener("click", function() {
stage.scaleX *= 1.5;
stage.scaleY *= 1.5;
stage.update();
});
function mouseMoveCB(e) {
stage.x = e.stageX;
stage.y = e.stageY;
stage.update();
}