Advanced Search

Return to Snippet

Revision: 16842
at August 17, 2009 20:54 by Motty
Initial Code 
<!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>
Initial URL 









Initial Description





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









Initial Title





Auto-resizing background image using Canvas









Initial Tags





image, background









Initial Language





JavaScript