画布尺寸

Question

I found this pretty awesome blog post that explains how to resize a canvas to fit any screen http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/ I implemented it and it is sizing it flawlessly but I get this problem that my objects appear off screen when the canvas is too little.

For example for my game I define a world with dimensions width 480 and height 1024, if I put an element on x axis at about 400 but the display that is currently used is 360px wide then the canvas would have correct ratio of width to height 0.46875 but the object will not be visible.

To solve this problem I suppose I need to define a ratio between the absolute world dimensions and the screen dimensions and multiply by that when I'm calculating the object's position, however my question is - is there a way for the canvas to do that automatically?

Answer 1

Both the canvas itself and the canvas element have a width and height. If they're not the same, the content of the canvas is automatically scaled to fit the element. So yes, you could define your canvas to be the size you want, and define the element such that it scales. Naturally, though, everything scales, and if the aspect ratio is different, your shapes get distorted.

For example: Here's a canvas that's 300x300, within a canvas element that's only 150x300. You can see the scaling when I draw a circle in it:

 var canvas = document.getElementById("clock"); var context = canvas.getContext("2d"); document.getElementById("status").innerHTML = canvas.height; console.log(canvas.height); var ctx = canvas.getContext('2d'); var path = new Path2D(); path.arc(75, 75, 50, 0, Math.PI * 2, true); ctx.fillStyle = ctx.strokeStyle = "blue"; ctx.fill(path); 

 canvas#clock { width: 300px; height: 300px; border: #D50003 1px solid; background: #1E1E1E; } 

 <canvas id="clock"></canvas> <div id="status"></div>