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.

Alex Baban
  • 11,312
  • 4
  • 30
  • 44
A Newcomer
  • 19
  • 1
  • 5
  • http://www.w3schools.com/tags/canvas_scale.asp – PMint May 28 '16 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: http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers. Are there any build in Javascript methods than work cross browser – A Newcomer May 28 '16 at 19:48
  • It's pretty much impossible to detect zoom scale cross-browser, unless someone can correct me. – PMint May 28 '16 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 '16 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 '16 at 20:03

1 Answers1

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.

RainingChain
  • 7,397
  • 10
  • 36
  • 68
  • 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 '16 at 03: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. – RainingChain May 29 '16 at 04: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 '16 at 04:12