CODEWITHSUNDEEP
javascriptcreatejs
asb14690
asb14690

Reputation: 1837

How i change fill color of graphics in create js

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();
});

Upvotes: 3

Views: 3816

Answers (1)

Kieran McClung
Kieran McClung

Reputation: 724

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>

Upvotes: 4

Related Questions