Hi friends, today we are going to see a cool example of animated 3D Background using HTML5 <canvas> and javascript. The <canvas> element is part of HTML5 and allows for dynamic, script-able rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Animated 3D Perspective Background Patterns using HTML5 Canvas

What is canvas element in HTML?

Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004, powering applications like Dashboard widgets and the Safari browser. Later, in 2005 it was adopted in version 1.8 of Gecko browsers, and Opera in 2006, and standardized by the Web Hypertext Application Technology Working Group (WHATWG) on new proposed specifications for next generation web technologies.

Canvas consists of a draw-able region defined in HTML code with height and width attributes. JavaScript or jQuery code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of <canvas> include building graphs, animations, games, and image composition.

Browser Compatibility:

As we mentioned before, this technology is developed with jQuery so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers:

  • Chrome 4+
  • Firefox 6+
  • Safari 3+
  • IE9+
  • Opera 10+
  • Android Browser 2.1+

The CSS

canvas {display: block}
body {background: blue;background-image: linear-gradient(top, rgb(69,132,180) 8%, rgb(31,71,120) 84%);
		background-image: -o-linear-gradient(top, rgb(69,132,180) 8%, rgb(31,71,120) 84%);
		background-image: -moz-linear-gradient(top, rgb(69,132,180) 8%, rgb(31,71,120) 84%);
		background-image: -webkit-linear-gradient(top, rgb(69,132,180) 8%, rgb(31,71,120) 84%);
		background-image: -ms-linear-gradient(top, rgb(69,132,180) 8%, rgb(31,71,120) 84%);
		background-image: -webkit-gradient(linear,left top,left bottom,	color-stop(0.08, rgb(69,132,180)),color-stop(0.84, rgb(31,71,120)));}

JavaScript

//creating a canvas using JS
var canvas = document.createElement("canvas");

//making the canvas fullscreen
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;

var fov = 450; //pixels are 450px away from us

var ctx = canvas.getContext("2d");
//appending the canvas to the body
document.body.appendChild(canvas);

//an array of pixels with 3 dimensional coordinates
//a square sheet of dots separated by 15px
var pixels = [];
for(var x = -450; x < 450; x+=15)
	for(var z = -450; z < 450; z+=15) 		pixels.push({x: x, y: 140, z: z}); 		 //time to draw the pixels function render() { 	ctx.clearRect(0,0,w,h); 	//grabbing a screenshot of the canvas using getImageData 	var imagedata = ctx.getImageData(0,0,w,h); 	//looping through all pixel points 	var i = pixels.length; 	while(i--){ 		var pixel = pixels[i]; 	//calculating 2d position for 3d coordinates 	//fov = field of view = denotes how far the pixels are from us. 	//the scale will control how the spacing between the pixels will decrease with increasing distance from us. 		var scale = fov/(fov+pixel.z); 		var x2d = pixel.x * scale + w/2; 		var y2d = pixel.y * scale + h/2; 		//marking the points green - only if they are inside the screen 		if(x2d >= 0 && x2d <= w && y2d >= 0 && y2d <= h){

/* imagedata.width gives the width of the captured region(canvas) which is multiplied with the Y coordinate 
and then added to the X coordinate. 
The whole thing is multiplied by 4 because of the 4 numbers saved to denote r,g,b,a. 
The final result gives the first color data(red) for the pixel.*/
			var c = (Math.round(y2d) * imagedata.width + Math.round(x2d))*4;
			imagedata.data[c] = 250; //red
			imagedata.data[c+1] = 250; //green
			imagedata.data[c+2] = 250; //blue
			imagedata.data[c+3] = 255; //alpha
		}
		pixel.z -= 1;
		if(pixel.z < -fov) pixel.z += 2*fov;
	}

	//putting imagedata back on the canvas
	ctx.putImageData(imagedata, 0, 0);
}

//render()
//animation time
setInterval(render, 1000/30);

That’s it!

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…
view demo

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!