simple HTML5 animation: clouds over background

If you are reading this text, sorry, your browser don’t support HTML5 Canvas (or maybe I did something wrong).

Code:

var canvas;
var ctx;
 
var background;
var width = 300;
var height = 200;
 
var cloud;
var cloud_x;
 
function init() {
	canvas = document.getElementById("cloud_demo_canvas");
	width = canvas.width;
	height = canvas.height;
	ctx = canvas.getContext("2d");
 
	// init background 
	background = new Image();
	background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';
 
	// init cloud
	cloud = new Image();
	cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
	cloud.onload = function(){
		cloud_x = -cloud.width;
	};
 
	return setInterval(main_loop, 10);
}
 
function update(){
	cloud_x += 0.3;
	if (cloud_x > width ) {
		cloud_x = -cloud.width;
	}
}
 
function draw() {
	ctx.drawImage(background,0,0);
	ctx.drawImage(cloud, cloud_x, 0);
}
 
function main_loop() {
	draw();
	update();
}
 
init();

HTML code:

<canvas id="cloud_demo_canvas" width="640" height="480">Alternative text if browser don't support canvas.</canvas>

Credits and notes:

  1. Legal :D Aqui no chrome ficou show!

  2. Really simple and functional thanks for this sample

  3. Marc Bernardo

    Parece um jogo de pokémon xD
    Um exemplo bacano ;)

  4. simple HTML5 animation: clouds over background « Silveira Neto http://t.co/UdKEItx #html5 #animation: simple HTM… http://t.co/57ICGc3

  5. on my firefox 6.0.1 it works fine! :-D
    I wanted to make an animated background for my blog, but maybe it’s too early. :-D

  6. lol there is an error, I’ve seen it with firebug but it is a firefox bug, but exists a workaround:
    http://stackoverflow.com/questions/982000/firefox-throwing-a-exception-with-html-canvas-putimagedata

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">