Jump to content


Tween fillColor of EaselJS object?

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,


I created a circle object using EaselJS, figured out how to easily tween the x, y, scaleX, scaleY, etc... but can't come up with a solution for tweening the FILL of the circle. Do I need to use ColorFilter and somehow tween that value? Thanks!


p.s. I REALLY miss "tint" from AS version :D

Link to comment
Share on other sites

Ha ha - yeah, I miss "tint" too but unfortunately in the world of JavaScript there are all sorts of frameworks and dom elements and canvas objects, etc. that have very different APIs so it's pretty much impossible to just provide one "tint" property that perfectly affects all of the stuff you might want to tint :(


Anyway, can you post some simple code that you're using for EaselJS for the circle? I just want to make sure I'm focusing the answer around your needs. Again, only something very simple is necessary here - you don't need to post all your production code.

Link to comment
Share on other sites

And FYI, there's a ColorPropsPlugin on the way (it's actually ready now) that should make this pretty easy - I just want some sample code of yours to make sure it is plugging in appropriately to your context. Once I see your code, I should be able to turn it around the same day and show you how to use the ColorPropsPlugin in conjunction with EaselJS.

Link to comment
Share on other sites

Here ya go! Can't wait to see the ColorProp plugin...


<script src="lib/easeljs-0.4.2.min.js"></script>

<script type="text/javascript" src="js/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/TweenLite.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

var canvas;
var stage;
var circle;
var circleRadius = 94;

function init() {

 TweenLite.ticker.addEventListener("tick", draw);

 canvas = document.getElementById('myCanvas');
 width = canvas.width;
 height = canvas.height;
 stage = new Stage(canvas);
 stage.snapToPixelEnabled = true;
 circle = drawCircle();
 circle.cache(-circleRadius, -circleRadius, circleRadius*2, circleRadius*2);
 circle.snapToPixel = true;
 circle.x = 200;
 circle.y = 200;

 TweenLite.to(circle, 1, {COLOR_PROP:"#FFFFFF", scaleX:.5, scaleY:.5, x:500, y:200, delay:1, ease:Power2.easeOut});

function draw() {
function drawCircle() {
 var s = new Shape();
 var g = s.graphics;

 g.beginFill(Graphics.getRGB(255, 0, 0));
 g.drawCircle(0, 0, circleRadius)

 return s;

Link to comment
Share on other sites

Okay, the ColorPropsPlugin that I am almost ready to release would have helped with this, but it still would have required some extra code on your part to conform the color values to what EaselJS requires, so I went one step further and created an EaselPlugin. Currently it only does ColorFilter tweens, but it will eventually work with more EaselJS stuff (like other filters).


So all you need to do is wrap your EaselJS-specific stuff in an "easel" object like this:

TweenLite.to(circle, 3, {y:150, easel:{tint:"#0000FF", tintAmount:0.5}});


Obviously tint and tintAmount aren't even properties in EaselJS but I added those for convenience rather than requiring you to monkey with the ColorFilter's redOffset, greenOffset, blueOffset, redMultiplier, greenMultiplier, blueMultiplier, etc.


Technically, you can tween ANY of those individual ColorFilter properties by wrapping them in an object named colorFilter inside the easel object, like this:

{easel:{colorFilter:{redOffset:102, greenOffset:50}}}


And you can put "tint" and "tintAmount" inside the colorFilter object too, but for convenience I also allow you to omit the colorFilter object if you just want to tween one of the special properties like tint/tintAmount.


Another piece of good news: just like the ActionScript colorTransform plugin, you can do "exposure" or "brightness" too! Exposure can be an especially nice effect on photos/images. Again, these simply make use of a ColorFilter object in EaselJS. So you could tween the exposure of an object to 1.5 times the normal value like this:


TweenLite.to(myImage, 2, {easel:{exposure:1.5}});


Or to make the brightness half of what it normally is, use "brightness:0.5". To completely blow out the brightness, use "brightness:2".


Obviously this is a very early version of the plugin, but it seems to work well thus far. And it automatically calls your object's updateCache() method to make sure that the filter renders (although you need to make sure you call the object's cache() method at least once initially to establish the cache).


I have attached an example file using your original code.


I'd love to hear what you think about it. I was on the fence about naming it EaselJSPlugin (and therefore the code would always need to be "easelJS:{...}" instead of simply "easel:{...}" but the "JS" seemed non-essential to me and I wanted to keep it shorter). If you disagree or have other suggestions, I'm all ears.


Does that help?


  • Like 2
Link to comment
Share on other sites

I downloaded the demo. looks awesome. I monkeyed around with the exposure on a photo and it is very nice.

  • Like 1
Link to comment
Share on other sites

Thanks for putting this together Jack! Got it implemented...


On default android 2.3 browser I am getting WEIRD color shifts/outlines/rendering... works fine on everything else I tested.


The performance of my canvas version is FAR slower than my SVG version on my iphone.


SVG (Raph) still feels like the clear winner for tweening a small set of shape objects on mobile. (As long as it supports it)


I am even cacheing/snapToPixel on all my shape objects.


Anyone know why the drastic different in performance? (iphone4)


I thought canvas was supposed to be the more modern technology :D

Link to comment
Share on other sites

its kind of ironic that canvas was supposed to be Apple's replacement for most of what Flash did and yet their implementation of it in iOS has gotten lots of poor reviews/response from developers. Apparently the iphone 4s with iOS5 is Apple's best offering to date as the canvas rendering is offloaded to the GPU.


I think you will find this video interesting:

How fast is the HTML5 Canvas on iOS and Android?

  • Like 1
Link to comment
Share on other sites

interestingly enough I've found that on my 27" beefy quad-core iMac these bitmap manipulations are really taxing. I have verified (to the best of my ability) that Chrome is using GPU-acceleration for canvas:


Screen shot 2012-06-10 at 9.55.27 PM.png


If I visit this example: http://www.snorkl.tv...rPhotoDemo.html and rollover/out the image my cpu will spike over 90% at times. Being that I'm totally new to easelJS and canvas the likelihood that I'm doing something really wrong is high, so I decided to to some research.


For kicks I cruised the web for "canvas demos" and I had a tough time finding a canvas demo that pushed my cpu over 15%.


Also, according to the EaselJS Bitmap docs (http://createjs.com/...lJS/Bitmap.html), it is recommended not to cache() or updateCache() bitmaps as it will hinder performance.


Yet in the EaselJS download package examples/simpleFilter.html file which illustrates a blur filter constantly animating, they use this technique:


function updateImage() {		  
  var value = Math.sin(angle)*range;			
bmp.filters = [new BoxBlurFilter(value,  value, 2)];			


I couldn't find a browser on the Mac that ran their demo without the cpu spiking.


There is another filter demo here: http://createjs.com/...S/demos/filters

This one doesn't give such a spike but from what I can tell the effect is only updating every 250ms but it still pushes my cpu to 30%.


Anyone have any experience running these filter demos on a pc?Any browser / os combo really shine?


From just toying around for a few hours I'm really impressed with easelJS and its many conveniences.

The flash-like display list and events make working with the canvas a breeze. From what I can tell canvas is fairly capable. I'm really surprised to see these bitmap effects be so taxing.


Is there something inherent to canvas or easelJS that is restricting these bitmap manipulations from being handled on the gpu?


[uPDATE] I realized that a big part of the performance drag was that I was re-drawing a very large canvas repeatedly when it wasn't necessary [/uPDATE]

  • Like 1
Link to comment
Share on other sites

Hey Carl,


When you say you realized a big part of the performance was redrawing a large canvas repeatedly could you elaborate? I am redrawing a large canvas when TweenLite ticks, were you redrawing even when TweenLite was not ticking? Would it make more sense to create individual canvases for each object and tween those? Thanks!

Link to comment
Share on other sites

  • 2 weeks later...

Hi Martis,


Sorry for the late response. This thread escaped me.

To answer you question I am not at all a canvas expert. I have been reading various tutorials and it seems like it can get complicated really quick trying to manage which parts of the canvas to redraw. Lots of talk about "multiple canvases" and "rendering offscreen".


I came across the KineticJS library that appears to be very efficient and handles separating various elements for re-drawing and interactivity very well. Much better than EaselJS from what I can tell:




In addition there are a zillion tutorials for it:




When I have some time I plan on experimenting with it.

  • Like 1
Link to comment
Share on other sites

  • 4 months later...



The sample code provided in this thread works for me...but when I tried using the sample code with the latest 0.5.0 version of EaselJS, it didn't work at all. Can someone confirm that the sample code isn't working for them in the latest version of EaselJS? Any offer any ideas what I need to tweak to get it to work in the latest EaselJS?



Link to comment
Share on other sites

Ah yes, it looks like the CreateJS folks changed the structure of where their classes/objects are (they dumped 'em all into a "createjs" object). I've made the necessary revisions to the demo and plugin and attached them here. Does that help?


Link to comment
Share on other sites

Yes, that revised example works perfectly...thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.