Month: June 2011

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 = 'https://silveiraneto.net/wp-content/uploads/2011/06/forest.png';
	
	// init cloud
	cloud = new Image();
	cloud.src = 'https://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:

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