Question

I can set the width and height of my canvas by setting the width and height attributes like so:

<canvas id="canvas" width="510" height="510"></canvas>

But I don’t want to hard-code all my drawing code to depend on these values. I’d like set the “internal” width/height to say, 100×100 and then draw everything in those coordinates, and have the canvas scale it out (the same way I do in OpenGL). That way if I ever resize my canvas, it still renders nicely.

I figured out that if I set the CSS width and height on the canvas I can make it larger, but keep the same units, but I found that it actually stretches the result and it blurs and looks terrible (I thought it still render like a vector, nice and crisp).

Is there a way to do this?

Answer 1

You could draw everything in “local” coordinates and then as the first thing you do when you draw, scale the context by the relative size of the actual canvas.

E.g.

HTML

<canvas id="c" width="510" height="510"></canvas>

JS

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

ctx.scale(5.1,5.1);
// Everything drawn here is in a 100x100 world, 
// but gets scaled to be in the 510x510 canvas
ctx.fillStyle = '#000';
ctx.fillRect(0,0,100,100);
ctx.strokeStyle= '#F00';
ctx.lineWidth = 1;
ctx.strokeRect(5,5,90,90);​​​​​

Running example