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:

Habibie
Habibie is an Indonesian Java, C#, PHP, MySQL, HTML5, CSS3 & JavaScript programmer. He is also a good graphic designer, video editor, animator and 3D modeler.

Related Post

How to make HTML5 Canvas goes full screen
Tagged on: