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:

Alternative text if browser don't support canvas.

Credits and notes:

Published inenglish

21 Comments

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

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

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

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

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

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

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

Leave a Reply

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