How to dynamically resize the canvas with JavaScript in under five minutes

in this video we're going to look at how we can dynamically resize the canvas using javascript and we're going to do all of this under five minutes hey there i'm david and i post videos like this every monday let's get started for this example we need two files an index.html file which you can see in your screen now and an index.js file which will contain all our javascript all we need is a basic html file the two lines of importance are line 4 which creates a reference to our javascript file and line 7 which contains our canvas element if you want to follow along then pause the video now and copy the html that you see on your screen in our index.js file we want to add two new functions we want to add one that triggers when we load the page this will be our window.onload function and another that triggers when we resize the page this will be a window.on resize function the next thing we need is a variable for our canvas element we'll call that cmv next we'll grab our canvas element and set its background we'll do this inside the window.unload function and when we go to our index.html page you will see our canvas on the screen with a nice blue background and its width and height is set to 800. now that we have a reference to our canvas element let's create a new function that resizes our canvas width and height to the same size as the window width and height we'll call that function resize canvas and now that we have our new resize function let's add it to both the window.onload and window.on resize functions this will do two things first it will trigger the resize when the page loads and secondly it will trigger the resize every time we resize the screen and now if we go to our page we will see that when it loads our canvas element is the same size as the document but the document has padding and margins so let's create a function to clean that up we'll create a new function called prepare document and that function does two things it sets the body's padding to zero pixels and the body's margin to zero pixels and then we'll add this new prepared document to our onload function and now when we load our page there you have it that's how to dynamically resize the canvas using javascript and we did it all under five minutes as promised but as a bonus let's see how we can use that resizing code to keep objects proportional to the screen let's create a new function called draw rect the first thing we'll do is we'll set a reference to the context you can get the context from the canvas element and we need that context object because that is what we use to draw on the canvas element next we'll set some variables for our rectangle's width and height as you can see there what we're doing is we're setting our width and height to be 20 of the canvas width and the camera's height next we'll add variables for the x position and y position of our rectangle and again what we're doing here is we're setting our x position to be half of our canvas width minus half of our rectangle's width we're also setting the y position to half the canvas height minus half the rectangle's width effectively what this will do is it will put a rectangle in the middle of the screen then we'll set a color for a rectangle we'll set our color to white and finally we'll use the context object to draw the rectangle on the screen and as you can see there we are using the variables that we set for the rectangle's position and dimensions to draw the rectangle on the screen next we'll place our new drawret function at the bottom of our window.unload function and then we'll do the same at the bottom of our on resize function and when we reload our page you can see that our rectangle size changes in relation to our screen size and that's it if you found the content useful then please consider hitting the like button and subscribing to the channel because there will be more content like this in the future also if you like web games then check out my nova project where i'm currently creating a web clone of the 90s macintosh game escape velocity and last but not least thanks for watching you

Channel: David Reid

Views: 241

Keywords: How to dynamically resize the canvas with JavaScript in under five minutes, resize a canvas element, resize the canvas element with javascript, resize a canvas element programmatically, make the canvas element the same size as the browser window, fullscreen canvas element, resizing the canvas element with javascript, use javascript to resize a canvas element, resize the canvas element when the browser window resizes, resize the canvas element when the document body changes size

Id: uq66IuqYdWg

Length: 4min 34sec (274 seconds)

Published: Mon Sep 13 2021