Resizable Canvas (JQuery UI)

Question

ANY DOM element can be made resizable according to this page: http://jqueryui.com/demos/resizable/

However, it seems that this doesn't work for the CANVAS element. Possible?

Answer 1

Canvas has two types of resize behavior:

• Resizing where the contents are stretched to fit the canvas's new dimensions
• Resizing where the contents remain static while the canvas grows or shrinks

Here's a page that demonstrates the two types of "resizing": http://xavi.co/static/so-resizable-canvas.html

If you want the first type of resizing (stretch the content) then place the canvas into a container div and set the width and height of the canvas to 100% using CSS. Here's what that code might look like:

/* The CSS */ #stretch {     height: 100px;     width: 200px; }  #stretch canvas {     width: 100%;     height: 100%; }  <!-- The markup --> <div id="stretch"><canvas></canvas></div>  // The JavaScript $("#stretch").resizable(); 

The second type of resizing (static content) is a two step process. First you must adjust the width and height attributes of the canvas element. Unfortunately, doing this clears the canvas, so you must then re-draw all its contents. Here's bit of code that does this:

/* The CSS */ #resize {     height: 100px;     width: 200px; }  <!-- The markup --> <div id="resize"><canvas></canvas></div>  // The JavaScript $("#resize").resizable({ stop: function(event, ui) {     $("canvas", this).each(function() {          $(this).attr({ width: ui.size.width, height: ui.size.height });          // Adjusting the width or height attribute clears the canvas of         // its contents, so you are forced to redraw.         reDraw(this);     }); } }); 

Currently the code above re-draws the canvas's content when the user stops resizing the widget. It's possible to re-draw the canvas on resize, however resize events occur fairly often and re-draws are expensive operations -- approach with caution.

Answer 2

There's a bit of a funny quirk on the canvas co-ordinate system, with regards to using this :

#stretch canvas {   width: 100%;   height: 100%; } 

(from the example above)

You have to use these CSS rules because you can not specify % in the canvas' width/height attributes. But you'll find you get unexpected results when you try to draw objects on to it using just these rules- drawn objects appear squashed. Here's the above CSS, with a canvas border...

    /* The CSS */     #stretch {         width: 200px;         height: 100px;               }     #stretch canvas {         border:1px solid red;         width: 100%;         height: 100%;     } 

The canvas is drawn to the right size and the border rule is implemented correctly. The blue rectangle, added in code elsewhere, is supposed to fill the canvas with a 20px padding all around, but this has not happened:

To fix this, make sure you also specify a width and height for the canvas element (either in the HTML or in javascript with setAttribute):

canvas.setAttribute('width', '200'); canvas.setAttribute('height', '100'); 

or

<canvas width=200 height=100></canvas> 

Now when I refresh the page I get what I expected:

This 'double-check' will make sure the canvas is drawn using the correct co-ordinate system and still allow it to be resized, via the CSS rules. If this is a bug, I'm sure it will be fixed in due course.

This is just about providing a fix, but you can read more in to it here