How would one make the JavaScript canvas (or whatever the 400px by 400px drawing area is called) larger than 400x400?

I have a 1440p screen and when I run my JS files through an HTML file, the canvas is not surprisingly a small 400px by 400px box in the top left.

Is there anything I can do to expand the canvas to a specified height and width?

How would one make the JavaScript canvas (or whatever the 400px by 400px drawing area is called) larger than 400x400?

I have a 1440p screen and when I run my JS files through an HTML file, the canvas is not surprisingly a small 400px by 400px box in the top left.

Is there anything I can do to expand the canvas to a specified height and width?

• javascript
• html
• firefox
• canvas
• window-resize

• please include your code or make a jsfiddle so we can work on your code. or tell you the problem – Baezid Mostafa Commented Sep 18, 2016 at 22:02

5 Answers 5

The following jsfiddle demonstrates how to resize the canvas. https://jsfiddle.net/intrinsica/msj0cwx3/

(function() {
  var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');

  // Event handler to resize the canvas when the document view is changed
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Redraw everything after resizing the window
    drawStuff(); 
  }
  resizeCanvas();

  function drawStuff() {
    // Do drawing here
    context.strokeRect(10,10, 230,100);
    context.font = '16px serif';
    context.fillText('The canvas is the blue', 30, 30);
    context.fillText('background color seen here.', 30, 50);
    context.fillText('It will resize if the window', 30, 70);
    context.fillText('size is adjusted.', 30, 90);
  }
})();

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas {
    background: #77f;  /* to show the canvas bounds */
    display:block;     /* to remove the scrollbars */
}

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

Are you declaring a canvas through HTML? If you are, you can use:

<canvas id="myCanvas" width="1400" height="900"></canvas>

If you want to change the size through Javascript, you can use:

<script type="text/javascript">
    document.getElementById('myCanvas').height = 800;
    document.getElementById('myCanvas').width = window.innerWidth;
</script>

As the Javascript is perhaps going to ignore the CSS try to set the canvas width & height in the javascript & CSS with for example, I want my canvas to have an width of 650px and height of 750px if your id is called canvas and also add width & height in the canvas tag

canvas.width = 650px;
canvas.height = 750px;

If you're using Processing.JS for your project, I might be able to help. I'm not sure if it works on regular JavaScript. It's worth a shot though

size(screenHeight, screenWidth);

If you want to auto-detect screen size it is also possible like this

var screenSizeH = screen.height;

OR

var screenSizeW = screen.width;

You might run into problems, though. As resizing canvas is only resizing canvas, not anything inside.

A way around this is to multiply everything you have to a scale.

var scaless = screenSize/400;

You would have to multiply EVERYTHING times the scale, that is if it's a square. You will have to make 2 scales for Height and Width

The canvas element is like any standard DOM object. Therefore you can resize the canvas using standard CSS:

<canvas />
<style>
canvas {
  width: 100%;
  min-height: 400px;
}
</style>

https://jsfiddle.net/z3pL9qp9/

The canvas is easy to reshape; it's the content you'd need to redraw to ensure you've factored dimension changes.