HTML5 Canvas Animations

HTML5 is the latest evolution of the HTML standard. It is bundled with a lot of new elements and attributes that makes semantics, connectivity, performance, device access, 2D/3D graphics, animation and styling better on the web.

With HTML5, animations can now be programmed in the browser. Users get to enjoy all sorts of animations powered by HTML5, CSS3 and JavaScript. Apart from providing elements, such as the video and audio tag, the canvas element is a part of HTML5 that enables building games and powerful animations.

Before we dive into how the HTML5 canvas element enables us to produce several types of animations, let’s take a look at how companion technologies -- CSS3 and JavaScript -- makes animations possible with some examples on the browser.


Solar System With Html 5:-

html:-

	<canvas id="canvas" width="300" height="300"></canvas> JS:-
	<script>var sun = new Image();
	var moon = new Image();
	var earth = new Image();
	function init() {
	sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
	moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
	earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
	window.requestAnimationFrame(draw);
	}
	function draw() {
	var ctx = document.getElementById('canvas').getContext('2d');
	ctx.globalCompositeOperation = 'destination-over';
	ctx.clearRect(0, 0, 300, 300); // clear canvas
	ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
	ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
	ctx.save();
	ctx.translate(150, 150);
	// Earth
	var time = new Date();
	ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
	ctx.translate(105, 0);
	ctx.fillRect(0, -12, 50, 24); // Shadow
	ctx.drawImage(earth, -12, -12);
	// Moon
	ctx.save();
	ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
	ctx.translate(0, 28.5);
	ctx.drawImage(moon, -3.5, -3.5);
	ctx.restore();
	ctx.restore();
	ctx.beginPath();
	ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
	ctx.stroke();
	ctx.drawImage(sun, 0, 0, 300, 300);
	window.requestAnimationFrame(draw);
	}
	init();
	</script>

OUTPUT