How i change fill color of graphics in create js

Question

I am using this for change color of fill in create js this is not working

var shape_rect = new createjs.Shape();
shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
shap_rect3.addEventListener('mouseover', function (evt) {
    shap_rect3.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
    stage.update();
});

score 4 · Answer 1 · answered May 16 '14 at 15:17

Just a couple of things here:

Firstly I noticed that the eventListener is linked to shap_rect3 but this hasn't been defined (at least not in your example). The mouseover colour is also the same as the declared colour, so you won't see any changes being made.

This should work for you, assuming the shap_rect3 was a typo.

loadGame = function() {
    var canvas = document.getElementById('canvas');
    var stage = new createjs.Stage(canvas);

    stage.enableMouseOver(); //Enable MouseOver events

    var shape_rect = new createjs.Shape(); //Create your shape variable
    shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25); //Draw initial rectangle

    shape_rect.on('mouseover', function(evt) { //Change colour on mouseOver
        shape_rect.graphics.beginFill("#FF5400").drawRect(61, 253, 398, 25);
        stage.update(evt);
    });

    //Add this if you want to simulate a hover state and return the rectangle back to it's original colour
    shape_rect.on('mouseout', function(evt) { //.on gives the same result as .addEventListener (at least from a visual perspective, I'm not sure about resource usage)
        shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
        stage.update(evt);
    });

    stage.addChild(shape_rect);
    stage.update();
}

I'm new to createJS and easelJS but this is one way of achieving this. Then just run the loadGame function onLoad:

<body onLoad="loadGame()">
    <canvas id="canvas" width="640" height="640"></canvas>
</body>

How i change fill color of graphics in create js

1 Answers1

Linked