Watch Me Write A Responsive HTML5 Canvas Application

In this detailed HTML5 and Pure JavaScript programming tutorial I show you how to use CSS to center a canvas on the screen using the grid box layout and use the resize event listener to make the canvas scale to fit the screen.

[shubhambhawsar]

good to see you worked on my suggestion. the video was nice and clear, loved it

[ahmada]

What if we want the canvas to take full width and height of the viewport and the objects(say a circle) inside to be responsive and change its position on resize relative to its previous position?

[nathanielwheeler]

One thing about the canvas height/width render function: it makes your browser attempt to render every frame of that resize. A good alternative is to use the viewport height and width instead in your css styling, since it's optimized specifically for window resizing.


Example: `canvas { height: 100vh; width 100vw; }`

[TheZackattack]

hey, how would i make a canvas that would resize based on height/width but also maintain aspect ratio? Also for anything that is inside it?

[AniMatrixXD]

You helped me so much! <3

I still don´t understand why this sh*t isn´t workig:

var situationCanvas =
var situationCtx =
situationCtx.clearRect(0, 0, situationCanvas.width(), situationCanvas.height());



But this one do
var situationCtx =
situationCtx.clearRect(0, 0, situationCtx.canvas.width, situationCtx.canvas.height);