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 freelance PHP, MySQL, HTML5, CSS3, JavaScript, Java, Python and C# programmer. He also do graphics design, video editing, visual effects, animation, 3D modeling and making games.

Related Post

How to make HTML5 Canvas goes full screen
Tagged on: