Scaling canvas element with static resolution

Question

I have canvas element and I want to scale it down, but without changing it's js logic. Drawing space in js should always be 600x300px, even if it is displayed in HTML as 300x150px. I know, I can resize image with static resolution, but can I do the same with canvas?

Answer 1

Changing the size using CSS scales it

Live Demo

So basically you set its size for drawing objects, etc, via the width and height properties like so

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

canvas.width = 600;
canvas.height = 300;

and then change its displayed size using css

#canvas{
   width: 300px;
   height: 150px; 
}​

Answer 2

Loktar has one way, using CSS, but that might cause some things to look funny. For instance paths scaled using CSS and scaled using the canvas' own transform may look very different (with the CSS ones looking bad and the canvas ones looking smooth). This depends on the browser though and might be perfectly fine. On chrome at least, text scaled this way looks very bad.

Instead I'd recommend looking at what I wrote here about the concept of "model" coordinates: Working with canvas in different screen sizes

Write everything as if the drawing space is 600x300, but keep a canvas that is 300x150.

Before drawing anything use ctx.scale(0.5, 0.5); and everything will look great!

It's quite possible after all to write one canvas app and the have it scale to all sorts of screens, even if you're just targeting one screen size.