Animate Resize Of Html5 Canvas Created By Kineticjs Framework

I'm trying to change the size of an HTML5 canvas element created by the KineticJS framework--that is, not the objects inside the canvas, but the element's size. Since the jQuery .a

Solution 1:

Without knowing the specifics of your final application, I would recommend avoiding animation of the canvas size if you can. As you probably know, if you change the size of a canvas element, everything stored on it is wiped clean. This means that animating the dimensions requires you to adjust the width and/or height incrementally while re-drawing the entire canvas at each iteration. For a desktop, this probably isn't a huge issue. Mobile devices will struggle, though.

Instead, I would suggest that you fake the animation by increasing the size of a container element (with a border, background color, etc. so the animation is apparent). Then, when the animation is done, save your current canvas data to a temporary object, increase the size of your canvas, and stamp the old content back on it.

If you are looking to animate the canvas dimensions to reveal content that is already present on a larger theoretical canvas (i.e. the user has a small window that's cropping the full canvas), you would be better off playing with your CSS width and height along with the overflow: hidden; property. With this approach you would be editing your full canvas during all draw operations, but animating the size of your viewport would be simple and smooth.

Solution 2:

The canvas is a view port for graphics, it can be the entire size of your document. You can use the context.clip() function to define the area you wish to display instead of resizing the canvas which requires the html box model to be updated. (your performance problem!)

ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();

Solution 3:

After some research, I found my own hacky-solution. An example using jQuery.animate. Had to animate them all, since KineticJS has several background layers.

//Gather all canvasesvar canvases = document.getElementsByTagName("canvas");

    //Animate their sizefor(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }