EaselJS: Changing a Shape Objects Dimensions

Question

Total noob question. I've been abusing Google and for some reason, have surprisingly not been able to find anything regarding this...? I feel like I'm missing something here. :P

I currently have a resize() function that modifies the canvas dimensions to the size of the window. In a minimal example (which also uses jQuery), I have a variable that references my Shape object. According to the documents, the Shape Object does not include a width & height property. What is the most efficient way of resizing a Shape Object? Removing/redrawing dynamically?

This is what I have:

            var stage;

            var bgColor;

            $(document).ready(function(){
                init();
            });

            function init()
            {
                stage = new createjs.Stage("canvasStage");

                bgColor = new createjs.Shape();
                bgColor.graphics.beginFill("#000000").drawRect(0,0, stage.canvas.width, stage.canvas.width);

                stage.addChild(bgColor);

                $(window).resize(function(){windowResize();});
                windowResize();
            }

            function windowResize()
            {
                stage.canvas.width = $(window).width();
                stage.canvas.height = $(window).height();
                //bgColor.width = $(window).height();// No width property
                //bgColor.height = $(window).height();// NO height property

                stage.update();}

Answer 1

You can use the shape's scaleX and scaleY to scale the shape.

Note: The Shape Object extends the DisplayObject so you might also want to look at the DisplayObject docs for many more useful properties/methods.

myShape.scaleX=1.2;
myShape.scaleY=1.2;