Revisions to HTML5 Canvas 100% Width Height of Viewport?

improved code formatting

Source Link

edited Jul 31, 2013 at 14:16

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

with CSS

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

with CSS

body { margin: 0; padding: 0 }
#c { position: absolute; width: 100%; height: 100%; overflow: hidden }

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

with CSS

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

improved code formatting

Source Link

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

with CSS

body { margin: 0; padding: 0 }
#c { position: absolute; width: 100%; height: 100%; overflow: hidden }

body { margin: 0; padding: 0 }
#c { position: absolute; width: 100%; height: 100%; overflow: hidden }

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

with CSS

body { margin: 0; padding: 0 }
#c { position: absolute; width: 100%; height: 100%; overflow: hidden }

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

with CSS

body { margin: 0; padding: 0 }
#c { position: absolute; width: 100%; height: 100%; overflow: hidden }

Source Link

created Nov 26, 2010 at 20:22

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

with CSS

body { margin: 0; padding: 0 }
#c { position: absolute; width: 100%; height: 100%; overflow: hidden }

Return to Answer