CODEWITHSUNDEEP
javascriptcsshtmlcanvas
niklassc
niklassc

Reputation: 550

Resize canvas to whole screen after it was drawn

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?

Upvotes: 0

Views: 2741

Answers (1)

crapier
crapier

Reputation: 373

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>

Upvotes: 1

Related Questions