1

I am working on a multiple web game using JavaScript. My canvas is currently set to the width and the height of my screen.

html
<canvas id = "canvas"></canvas>

javascript
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
//Making canvas scale;
c.width = window.innerWidth;
c.height = window.innerHeight;

    function resize(){
 //Add some code
   }

My problem is, I do not want my players to zoom out, well not by default. It will make the game look bad and give the players an edge over everyone else. So I need to add some code to go into the resize method, that regardless of scale, the canvas will not be zoomed out. If the end result is something blurry at 300%+ that is fine.

IMPORTANT: the resize function cannot remove or reset the canvas back to default.

5
  • w3schools.com/tags/canvas_scale.asp
    – PMint
    May 28, 2016 at 19:41
  • How would I know what the zoom level is? This article is the only one I have and its a bit outdate: stackoverflow.com/questions/1713771/…. Are there any build in Javascript methods than work cross browser
    – A Newcomer
    May 28, 2016 at 19:48
  • It's pretty much impossible to detect zoom scale cross-browser, unless someone can correct me.
    – PMint
    May 28, 2016 at 19:51
  • If I do not know the zoom, is there another clever way for me to get the factor in which I would scale my canvas.
    – A Newcomer
    May 28, 2016 at 19:55
  • Instead of having a dynamic canvas size, make it static, and scale it with the function I linked. If you want it fullscreen, ctx.scale(window.innerWidth/staticCanvasWidth, window.innerHeight/staticCanvasHeight); where staticCanvasWidth and staticCanvasHeight are the static width/height of the canvas you have just set
    – PMint
    May 28, 2016 at 20:03

1 Answer 1

1

There are various ways to scale a canvas.

First off, there are 2 main parameters for the canvas size:

-Canvas Pixel Count. Set via canvas.width = 1000

-Canvas Display Pixel Size. Set via canvas.style.width = '1000px'

If you want all players to see a 1000x1000 region but displaying it fullscreen:

canvas.width = 1000; 
canvas.height = 1000; 
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';

There is also another option with canvas.style.transform = 'scale(2,2)'.

This method is the closest thing to the browser zoom done via Ctrl+ or Ctrl-.

The big advantage of transform is that the scaling is applied to all DOM children elements. If your game is using HTML for its interface, then this is the way to go. (By applying the scaling on the div containing the canvas + HTML interface.

3
  • Quick follow up question. It seems that squares are being stretched to form rectangles. If I want to preserve a square using this method what should I do? My draw Rect has identical length and width parameters but appears as a rectangle.
    – A Newcomer
    May 29, 2016 at 3:39
  • If the pre-scaled canvas doesn't have the same width/height ratio than the window, then obviously there will be stretching. You can change the ratio of your canvas to match the window ratio. But in that case some players will see more content than others. Other option is to enlarge as much as possible while respecting the ratio similar to watching 4:3 movies in 16:9 screens. But that means you will have black borders. May 29, 2016 at 4:00
  • Thanks! By diving the "window.innerHeight / window.innerWidth" and multiplying it to the x value I was able to counter the problem. Thanks for all the help.
    – A Newcomer
    May 29, 2016 at 4:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.