Dynamic canvas width and height

Question

From what I understand about canvas ,

1. Define a board with size
2. Then we only can draw on it

But I am trying to achieve

1. Draw the text
2. Measure the text size
3. Define the canvas size

HTML

<div style="background:grey;display:inline-block;">
   <canvas id="samplecanvas" style="background:red;"></canvas>
</div>

Javascript

var c = document.getElementById("samplecanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World" ,10, 50);

Is there any way to measure the text size and dynamically adjust the canvas size?

This is my demostration , I define the canvas without any size and draw on it , but the canvas size is big and have many extra white space.I am trying to make the div and canvas expand accordingly to the content size

http://jsfiddle.net/5877a4aq/2/

Answer 1

So here is a function to do this, which uses an approximation for the line height and which will need some adjustements if you need more than one line of text.

Note that you don't have to draw the text before you measureText(), but when you change the canvas' height and width, its context will reset (clear). So you then need to reset its font property then draw your text.

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

function drawTextAndResize(text, fontSize, font){
  text = text || "hello world";
  fontSize =  fontSize || 48;
  font = font || "serif";
  // First we set the font to the context
  ctx.font = fontSize + 'px '+ font;
  // We set the size of our canvas accordingly to the width of our text
  canvas.width = ctx.measureText(text).width;
  // 1.3*fontSize is an approximation of the line height, for a complete way to get the height, refer to this answer : http://stackoverflow.com/a/17631567/3702797
  canvas.height = fontSize*1.3;
  // Since our context has been reset, we have to reset its font as well
  ctx.font = fontSize + 'px '+ font;
  // Finally we draw the text, approximately vertically centered
  ctx.fillText(text, 0,canvas.height/1.3);
  }

drawTextAndResize("This is some text", 32, "arial");
setTimeout(drawTextAndResize, 4000);

canvas{border:1px solid}

<canvas/>

Answer 2

Just for Reference:

1:

ctx.fillText(<text>, <pos-x>, <pos-y>);

2:

var x = ctx.measureText(<text>).width;

3:

ctx.canvas.width = x * <scale>;
ctx.canvas.height = x * <scale>;