0

I am writing a simple game in javascript which draws on a HTML canvas. The canvas has a fixed size (1280 × 720) and that is also the "room" in which the objects are drawn.

Now I want the canvas to be stretched to be 100 % of the screen. I can't do that by just setting the width and height of the canvas because the javascript would only draw in the 1280 × 720 rectangle in the top left.

What I want instead is, that it is zoomed in so that it takes up the whole screen and if the javascript draws something at (1280, 720) it should be the bottom right corner.

Can I do this without using any external libraries?

niklassc
  • 597
  • 1
  • 9
  • 24
  • why not just set the canvas size to the viewport size? `canvas.height = window.innerHeight` and `canvas.width = window.innerWidth` – Robbie Milejczak Nov 13 '17 at 20:00
  • 1
    Add an `resize` event, here you must update thr `width` and `height` from your `canvas` in `DOM`, do not update only the `width`/`height` over `CSS` or the `width="XXXpx"`/`height="XXXpx"` Attributes of the `canvas`. – Adrian Preuss Nov 13 '17 at 20:04
  • 1
    I think just adding CSS to the canvas should help you here. Can you try this? https://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window#answer-23435023 – Shashank Nov 13 '17 at 20:05
  • @Shashank Thanks, that did work! However, it caused an error with the mouse input, because if I now want to click on an object I have to click there where it would have been if it would not have been resized. – niklassc Nov 13 '17 at 20:17
  • 1
    Yeah that would definitely be a problem and also the canvas might seem distorted as it scaled "without" maintaining the aspect ratio by CSS. If I may, I would suggest to resize the canvas with desired height & width AND change the objects' attributes (positions and dimensions) based on the aspect ratio. – Shashank Nov 13 '17 at 20:21
  • I would do that but I am trying to modify an already existing project so it would be too much work at the moment to modify all the positioning. Maybe I will do that at some point but I will just try to correct the mouse input for now. – niklassc Nov 13 '17 at 20:26
  • 1
    Alright! Just use the same aspect-ratio method for the mouse input i.e. offsetX and offsetY. That would be simpler I suppose. – Shashank Nov 13 '17 at 20:38

1 Answers1

1

If you wish to keep the rendering size at 1280x720 for the canvas, but stretch or expand it to the window size you can use the css width and height for that.

Using css will only cause the shape of the canvas to change, but the internal pixels/drawing frame are still set by the width and height attribute. (This will of course cause the image to be blurry if it is upscale to much)

With CSS:

* { margin: 0; padding: 0;}

body, html { height:100%; }

#canvasID {
    position:absolute;
    height:100%;
    /*width:100%; /* uncomment if you don't care about aspect ratio*/
}
<canvas id="canvasID" width=128 height=72>

With a script:

$(document).ready(function() {
  function resizeCanvas() {
    var canvas = $("#canvasID");
    // original width/height from the canvas attribute
    var heightOriginal = canvas[0].height;
    var widthOriginal = canvas[0].width;

    // fill to window height while maintaining aspect ratio
    var heightNew = window.innerHeight;

    // replace with window.innerWidth if you don't care about aspect ratio
    var widthNew = heightNew / heightOriginal * widthOriginal;

    canvas.css("height", heightNew + "px");
    canvas.css("width", widthNew + "px");
  }

  // keep size when window changes size
  $(window).resize(resizeCanvas);

  // initial resize of canvas on page load
  resizeCanvas();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<canvas id="canvasID" width=128 height=72>

Alternately if you wish for the internal canvas resolution/size to be able to change dynamically you can use scale to ensure that everything gets rendered to the right size.

$(document).ready(function() {
    var canvas = $("#canvasID");
    // original width/height from the canvas attribute
    var heightOriginal = canvas[0].height;
    var widthOriginal = canvas[0].width;
    // current scale (original 1 to 1)
    var verticalRatio = 1;
    var horizontalRatio = 1;

    // the canvas context
    var ctx = canvas[0].getContext('2d');

    function setScale() {
      // remove previous scale
      ctx.scale(1/horizontalRatio, 1/verticalRatio);

      // fill to window height while maintaining aspect ratio
      var heightNew = window.innerHeight;
  
      // not needed if you don't care about aspect ratio
      var widthNew = heightNew / heightOriginal * widthOriginal;

      // these would be the same if maintaining aspect ratio
      verticalRatio = heightNew / heightOriginal;
      horizontalRatio = widthNew / widthOriginal;
      
      // update drawing scale
      ctx.scale(horizontalRatio, verticalRatio);

      // update width and height of canvas
      canvas[0].height = heightNew;
      canvas[0].width = widthNew;
    }
  
    // keep size when window changes size
    $(window).resize(setScale);
  
    // initial resize of canvas on page load
    setScale();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="canvasID" width=128 height=72>
crapier
  • 373
  • 1
  • 6