Is there any way to make an html5 canvas element resizeable?

Question

Is there a native solution that provides a handle in the corner of my HTML5 canvas similar to that in a default <textarea> element.

 <textarea>resizeable</textarea> 

I assume this will clear the canvas and will require a redraw as this is the case when resizing the canvas programmatically with canvas.width and canvas.height .

I looked around and found nothing, but wanted to check before rolling my own. If anyone is sure that there is no "easy" way, then that is a perfectly acceptable answer. Thanks!

Answer 1

The best I could come up with was use jQueryUI Resizable like so

jsFiddle : https://jsfiddle.net/n24dbaw9/

Html

<div class="resizable">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.resizable{
  width: 400px;
  height: 400px;
}

#myCanvas{
  width: 100%;
  height: 100%;
}

Javascript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#777";

$(function() {
  $(".resizable").resizable();
});

setInterval(function(){ ctx.fillRect(0, 0, 400, 400); }, 3);

Basically I have styled the canvas to fit inside of the "resizble" div, which is set to 400 by 400 at default. The canvas has a style which is 100% width and height so when the user resizes the "resizble" div the canvas will then just stretch out.

Answer 2

You will want to put the canvas into a JavaScript draw() function:

function draw() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}

and your body element in css should have height and width set to 100%