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.