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:
- Fluffy Clouds by Daniel Gregory Benoy under GNU GPL 2.0/GNU GPL 3.0/CC-BY-SA 3.0 license.
- Background tiles by me. See the Open Pixels project. CC-BY-SA 3.0 license.
- Code by me under GNU GPL 3.0 or CC-BY-SA 3.0 license
- To embed the JavaScript in a WordPress post compress it to one line.
- Thanks to Mozilla’s HTML5 tutorial and James Litten’s Tutorial “Moving Shapes on the HTML5 Canvas With the Keyboard”.
- If you could not see it here, try this simpler page.
- Tested in Google Chrome 10.0.648.204. Worked or not worked in your browser? Please comment.




Legal :D Aqui no chrome ficou show!
Really simple and functional thanks for this sample
Parece um jogo de pokémon xD
Um exemplo bacano ;)
simple HTML5 animation: clouds over background « Silveira Neto http://t.co/UdKEItx #html5 #animation: simple HTM… http://t.co/57ICGc3
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
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
I cant make it work, sorry for my question, how do I have to add the code, what tags should I use?
how would you oscillate the cloud?
I have been looking for hour and found oscillation animation but not an image like png.
thanks
Hi Charles, you can animate in the same way but instead of updating cloud_x using a constant you could make cloud_x a function of sin or cos over the time.
how would i make the clouds come from the other side
that is so cool though I tried it give me an error of canvas is null in width= canvas.width;
another issue I created a cloud using bezier curve I want to animate it but it doesnt work any help please.
really good!!
thanks Silveira
:) funciona de esta manera
var canvas;
var ctx;
var background;
var width = 300;
var height = 200;
var cloud;
var cloud_x;
window.onload = function (){
canvas = document.getElementById(“nubes”);
console.debug(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();
}
Simple HTML5 animation: clouds over background http://t.co/qv81iDeKpC