html5 - Canvas layout with JavaScript -

I want to layout with a javascript in a canvas. This code is full screen how do I get to the canvas?

  $ (" .left.pane "). Resizable ({handle: "E, W"}); $ (".joinpane"). Resizable ({handle: "E, W"}); $ (".center.pane.Commander .bottom"). Resizable ({handle: "N, S"});  

  html, body {margin: 0; Padding:}} .header {status: fixed; Top: 0; Left: 0; Correct: 0; Height: 20px; Background color: moccasins; }. Wiper {status: complete; Top: 21px; Correct: 0; Bottom: 0; Left: 0; Background color: fuzzy; } .net-wrapper, .center.pane. Zinc {display: table; Width: 100%; Height: 100%; }. Pen {display: table-cell; }. Left.pane {background color: oliverbred; } .center.pane {background color: light blue; } .center.pane. Winner .top, .center.pane. Winner .bottom {display: table-row; } .center.pane .inner .top {background color: light; } .center.pane. Commander .bottom {background color: orange; Height: 100%; Width: 100%; } .right.pane {background color: # 999; }  

  & lt; Div class = "wrapper" & gt; & Lt; Div class = "inner-wrapper" & gt; & Lt; Div square = "left pane" & gt; Left & lt; / Div & gt; & Lt; Div class = "center pane" & gt; & Lt; Div class = "inner" & gt; & Lt; Div class = "top" & gt; Center Top & lt; / Div & gt; & Lt; Div class = "bottom" & gt; Center bottom & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div square = "right pane" & gt; Right & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

JQueryUI.resizable a canvas Originally not applicable for the element.

To do the same thing in the canvas you have to do it manually. This is because the canvas does not "remember", where it attracts any individual rectangle and canvas individually can not change any rectangle again or change its size. What you should do is to clean the entire canvas and re-draw all rectangles in their new position and sizes.

Rectangles representing your div areas: context.fillRect

< P> Listen to mouse events on the canvas: addEventListener ('Masudown' ... etc.

Repeat in response to "Manually" mouse events Size Replaces:

• Save each rectangle property in an object: var rect1 = {x :, y :, width:, height:} < / P>

• Hit-test on each rectangle, at Massundown. Hit, as resizing the rectangle Hit Test Algorithm: var isHit = mousex> Rect.x and MXx

• Empty the entire canvas and all Rectangle the rectangles. Resize the flag rectangle flagged from the drawn distance: rect.width + = (mouseX-startMouseX); rect.height + (mouse-starting mouse); Premma

• On the mouseover, stop resizing.