EaselJS: change shape fill color on mouse click

canvas, easeljs, html5-canvas

Solution

What I would recommend is using the onMouseOver/onMouseOut calls backs on a the shape or display object that you are creating. When you can update you color that was.

Here is a simple demo that might help illustrate my point.

Link to demo

var stage = new createjs.Stage("test");
createjs.Touch.enable(stage);
stage.enableMouseOver(10);
var padding = 1;
var width = 55;
var height = 55;
var cols = 15;
for(var i=0;i<200;i++) {
    var s = new createjs.Shape();
    s.overColor = "#3281FF"
    s.outColor = "#FF0000"
    s.graphics.beginFill(s.outColor).drawRect(0, 0, width, height).endFill();
    s.x = (width + padding) * (i%cols);
    s.y = (height + padding) * (i/cols|0);
    s.onMouseOver = handleMouseOver;
    s.onMouseOut = handleMouseOut;
    stage.addChild(s)
}

createjs.Ticker.addListener(stage);

function handleMouseOver(event) {
   var target = event.target;
   target.graphics.clear().beginFill(target.overColor).drawRect(0, 0, width, height).endFill();
}

function handleMouseOut(event) {
    var target = event.target;
    target.graphics.clear().beginFill(target.outColor).drawRect(0, 0, width, height).endFill();
}

function tick() {
  stage.update();   
}

Hope this helps.

Problem

I'm having an hard time working with EaselJS. Basically I want to create a simple grid and highlight the actual element selected: ``` var stageWidth = 800, stageHeight = 600, cell_size = 50, w = 16, h = 12, n = w * h, canvas, stage, background; $(document).ready(function(){ canvas = $("#container")[0]; stage = new createjs.Stage(canvas); var x_pos = 0, y_pos = 0, res = 0, grid_el; for(i=0;i<n;i++){ res = i%w; if(i>0){ if(res===0){ x_pos = 0; y_pos++; } else { x_pos++; } } grid_el = new createjs.Shape(); grid_el.graphics.setStrokeStyle(2,"square").beginStroke("#000000"); grid_el.graphics.beginFill("#70FF85"); grid_el.graphics.rect(x_pos * cell_size,y_pos * cell_size,cell_size,cell_size); grid_el.x_pos = x_pos * cell_size; grid_el.y_pos = y_pos * cell_size; grid_el.name = "quad"; stage.addChild(grid_el); } stage.update(); stage.onMouseDown = function(e){ console.log(e); var quad = this.getObjectsUnderPoint(e.stageX,e.stageY); var clone = quad[0].graphics.clone(); clone.beginFill("#51D9FF"); quad[0].graphics = new createjs.Graphics(clone); stage.update(); } }); ``` I tried cloning the actual element graphics property, changing the fill color and then updating the stage, but I only obtain a white element, just like it didn't recognize the new graphics properties. Thanks for any help.

Original source