How to make HTML5 Canvas goes full screen

Sometime you want to create HTML5 with specific dimension, and then you make browser zooms on it to full screen.

A way to make it happened is to style the canvas tag so it will fill the screen. For example: style=”width: 100%”. With this method the canvas width will be the width of the screen (browser). However, this will stretch your contents and may not be satisfying.

But sometime you want to create dynamic HTML5 canvas that its dimension derived from user’s browser’s width and height without canvas’s contents. What we can do is first to style body element like this: Then we create canvas, and after creating canvas, we create script for it like this:

Viola… and the result is this:

And here is the full script:

Published by


Habibie is an Indonesian freelance frontend-backend web developer and cross platform mobile app programmer. He's also good at graphics design, video editing, visual effects and animation.