How to solve HTML5 Canvas 100% Width and Height problem in Viewport

HTML5 Wallpaper Download
HTML5 Wallpaper Download
First approach:


(function() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function redrawCanvas() {
// redraw all things here


* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; } /* To remove the scrollbars */

Second approach, all in one:

<!DOCTYPE html>
<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:0;padding:0">
<canvas id="myCanvas" style="width:100%;height:100%;background-color:yellow;display:block">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.strokeText("w:"+canvas.width+" h:"+canvas.height, 0, 8);

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.