Tela redimensionável jquery em uma <div> - javascript, jquery, html, canvas

Eu uso a função redimensionável de jquery (http://jqueryui.com/resizable/) para redimensionar uma div. Nesta div, tenho uma entrada e uma tela. Quero que, quando redimensionar minha div, a tela a seguir, como posso fazer isso?

Com um código de exemplo como este:

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
<div id="resizable">
<input type="text" id=field />
<canvas id="mycanvas" height="400px"></canvas>
</div>

Obrigado pela ajuda.

Respostas:

Se você usa CSS (como jQuery), deve estarredimensione proporcionalmente ou os desenhos da tela aparecerão distorcidos pelo alongamento. Faça isso configurando a propriedade aspectRatio ao aplicar .resizable ().

Além disso, como você deseja que o #myCanvas também seja redimensionado, defina a propriedade alsoResize ao aplicar .resizable ().

  // make #resizable resizable
// let #resizable know to also resize #myCanvas when it resizes
// require that the resizing be proportional so the canvas drawing is not distorted

$("#resizable").resizable({
alsoResize: "#myCanvas",
aspectRation:true
});

$("#myCanvas").resizable();

Defina seu canvas elemento "s height e width a 100%:

div#resizable {
height: 200px; /* Initial height. */
width: 200px; /* Initial width. */
}

div#resizable canvas {
height: 100%;
width: 100%;
}

Tente isso.

 $("#resizable").resizable({ stop: function(event, ui) {

$("#mycanvas").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);

} });