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:

17 thoughts on “simple HTML5 animation: clouds over background

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

    thanks

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

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

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

Leave a Reply

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

You may 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>