The above effect is created using JavaScript to draw simulated vines growing around an invisible lattice. We'll explore how this achieved, touching on a few key concepts including the canvas element, curves, b-splines, and animation using requestAnimationFrame. We'll start at square one, but a good base understanding of JavaScript is assumed.

The Canvas Element

The canvas element allows for dynamic rendering of graphics using JavaScript. It renders bitmap graphics, not vector graphics like it’s cousin SVG. The canvas element itself doesn't contain any drawing functions. To draw on the canvas element, we first need to first choose a rendering context. (Think of the context as the painter.) Most of the time this will be the "2D" rendering context. Many browsers also support 3D rendering using WebGL, but we'll save that topic for another day. To select a context, we obtain a reference to the canvas element in the DOM and call its getContext method.

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

The context object returned contains a number of methods to draw on the canvas. The following example draws a 50 by 50 pixel square at the top left corner of the canvas. For an entire list of the available methods, refer to the W3C HTML Canvas 2D Context Specification.

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
context.fillRect(0, 0, 50, 50);

In our animation we will be drawing mostly lines. To draw a line, don’t think of it as a line, but as a path. A path can be made up of a number of adjoining line segments or curves. First we define the path, then apply a stroke to it. The following example draws a diagonal red line from the point (0, 0) to the point (100, 100).

context.beginPath(); 
context.moveTo(0, 0); 
context.lineTo(100, 100); 
context.lineWidth = 1; 
context.strokeStyle = 'rgb(255, 0, 0)'; 
context.stroke();