Posted By

Motty on 08/17/09

Tagged

Versions (?)

Last Edited at 08/17/09 08:54pm

Statistics

Viewed 1307 times

Favorited by 0 user(s)

Related snippets

Auto-resizing background image using Canvas

/ Published in: JavaScript

The canvas drawImage size default is 300 x 150, so it's using the CSS to resize the canvas. Example posted at http://pastebin.me/76aed7005b1b413ea3c479287f4dbd59

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Conforming XHTML 1.0 Strict Template</title>
</head>
<body>
 
<h2>Auto-resizing the background image using Canvas</h2>
 
<canvas id="myCanvas" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: -1;"></canvas>
<script type="text/javascript">
 var context = document.getElementById('myCanvas').getContext('2d');
 var w = document.body.clientWidth;
 var h = document.body.clientHeight;
 img = new Image();
 img.src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bg1.jpg';
 img.onload = function () {
  context.drawImage(this,0,0,300,150);
 };
</script>
</body>
</html>