Skip to content

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:

Published inenglish

20 Comments

  1. Zeh Zeh

    Really simple and functional thanks for this sample

  2. Marc Bernardo Marc Bernardo

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

  3. 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

  4. I cant make it work, sorry for my question, how do I have to add the code, what tags should I use?

  5. charles charles

    how would you oscillate the cloud?
    I have been looking for hour and found oscillation animation but not an image like png.

    thanks

  6. 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.

  7. how would i make the clouds come from the other side

  8. Diana Diana

    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.

    • Nelson Nelson

      Put script after Canvas tag!!

  9. paulomi paulomi

    really good!!
    thanks Silveira

  10. Jasser Jasser

    same error of DIANA
    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.

  11. Jasser Jasser

    :) 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();
    }

  12. […] LOGO HTML5 2. FLASHCANVAS 3. HTML5 ANIMATION: CLOUDS OVER BACKGROUND 4. HTML5 EXPERIMENT 5. HTML5 & CSS3 READINESS 6. PRESENTATION USING HTML5 WEBSITE […]

  13. Muhammad Zaid Muhammad Zaid

    Amazing work, nice and simple.

    Thanks for Sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *