How to resize the canvas using JavaScript?

Question

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?

Answer 1

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>

Answer 2

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>

Answer 3

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;

Answer 4

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

Answer 5

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.