Canvas Resizing and Scaling

by Eric Pias

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale -->

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>

JavaScript

var canvas = 
document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.scale(1, 1);
ctx.font = "48px serif";
var font = ctx.font;
var text = "Testing really really really really really really really long long long long long text!";
//ctx.fillText(text, 10, 120);
var metrics = ctx.measureText(text);

if (metrics.width > canvas.width) 
  canvas.width=metrics.width;
//ctx = canvas.getContext("2d");
ctx.font = font;
//metrics = ctx.measureText(text);
//ctx.scale(1, 1);

var textWidth = metrics.width;
var textHeight = metrics.emHeightAscent + metrics.emHeightDescent;
//alert(textHeight);  // NaN
//canvas.width="200";
var scalex = (canvas.width / textWidth);
var scaley;
if (textHeight && textHeight > 0)
	scaley = (canvas.height / textHeight);
else
  scaley = 1;

var ypos = (canvas.height / (scaley * 1.25));

ctx


ctx.fillText(text, 0, ypos);