Resize canvas size using jQuery (.animate) and KineticJS framework

Question

I'm trying to resize a HTML5 canvas element using jQuery. (NOTICE: Not the objects inside the canvas, but the elements size!)

It's working fine with my code using jQuery only: http://jsfiddle.net/dAQBD/

But when trying to do the same with the KineticJS framework, it doesn't work at all. My code: http://jsfiddle.net/mLMSE/1/

I suspect that this is because the framework creates the canvas itself based on the <div> - through - (var stage = new Kinetic.Stage("div", 500, 200);)

Is there any way to work around this? Would prefer not to change the framework now, since I've done quite a lot on my real project (this is just dummy code). Thanks.

(I know my fiddles say "expand" while they infact decrease in size. Typo.)

Answer 1

jQuery's animate takes a map of CSS properties. In other words, you are changing the CSS width of the canvas and not the canvas' actual width attribute. This is most likely not what you want. You're going to have to make your own animate function (or be more clever with jQuery's since it only operates on CSS).

You could do a number of things here. One idea (probably not the best idea) would be to animate a div down to 300 and have a timer that checks the clientWidth of the div. The timer function constantly sets the canvas.width equal to the div.style.clientWidth. This way the canvas animates down with your dummy div.

Answer 2

The main reason this isn't doing anything is that you are only resizing the container with jquery. kinetic populates that container with canvas elements. It absolutely positions these canvas elements to achieve a layering effect which then allows it swap the layering order during animations. These absolutely positioned canvas elements acquire their dimensions when you set new kinetic.Stage()

You have no css rule set for exampleCanvas try something like this:

#exampleCanvas{ overflow: hidden; width: 500px; height: 200px; border: 2px solid red; position: relative; }

​ also, kineticjs api has the .setSize() method, so stage.setSize(width, height) might be a step toward a solution. so, in the animate callback use stage.setSize(300, 200);

If this isnt having the desired result you can target the canvas elements in your container like so:

$("#exampleCanvas").children("canvas").animate( ... );