Introduction
A landing page creates the first impression of a brand when someone finds its website. The page has to stand out from the clutter of other similar websites out here in the wild and, a great way to achieve this is by using interactive animation on a landing page, in a playful or instructional way.
This article is for front-end developers who are already familiar with HTML and JavaScript. I’ll introduce you to the HTML Canvas followed by a tutorial project demonstrating the steps required to build landing pages with the HTML canvas. I’ll provide an all-encompassing rundown of the <canvas>, then use a sample project to show how to animate objects, simulate real-world physics, and use particle emitters to make bubbles!
Furthermore, with the rise of Web3, the HTML <canvas> will play an important role when building immersive experiences.
What is HTML canvas and why does it Matter?
<canvas> is a relatively new HTML element that is used to render 2D and 3D graphics on a webpage using JavaScript. Everything from text to animation, video games and generative art can be created with the canvas.
Understanding the power of the HTML canvas gives web designers and developers a wider set of tools to play with.
The History of HTML canvas
Before the <canvas> element was introduced, you would have to use a browser plug-in like Adobe flash to create rich interactive graphics on the web and, even worse anyone visiting the site had to install the plugin before they could see the content.
Adobe Flash was a cool alternative during its hay day but now most modern browsers support the HTML Canvas by default.
A few Terms to Take Note of
- BOM: In HTML the objects on a page are made from
<tags>and are organized in a tree called the Document Object Model (DOM). However, on the canvas display objects like shapes, images and sprites are made from JavaScript functions and organized in a tree called the Bitmap Object Model (BOM). Not to be confused with the “Browser Object Model”, which is not an official term either. - WebGL: Web graphics library (WebGL) makes use of the HTML canvas to render interactive 3D graphics. A WebGL program will contain JavaScript and shader code which runs on a computer’s Graphics processing unit (GPU).
List of JavaScript Frameworks for working with HTML Canvas
You choose from a bunch of very powerful with libraries when creating for the <canvas>. They give you a Bitmap Object Model (BOM) along with functions and classes that will increase your productivity.
- Three JS: A JavaScript library for animated 3D graphics using WebGL
- Babylon JS: A powerful engine for rendering complex 3D scenes
- CreateJS: a suite of libraries including; EaselJS, TweenJS, PreloadJS and SoundJS
- ZIM: extends CreateJS with classes, helper functions, components and controls
- Pixi.js: a 2D canvas / WebGL rendering engine with a BOM and events
- Phaser: a popular game development framework with a strong community based on PixiJS
- P5.js: a JavaScript port of Processing (in Java) for experimental works
- Paper.js: a vector graphics scripting framework with Bezier controls.
How to build a landing page with HTML Canvas
What can be created with the <canvas> is only limited by your imagination and programming skills. This simple project below will show you what it’s like to code with the <canvas> using one of my favorite frameworks; ZIM.
Try it now! Click around the page to make the fish swim and hit the floaters. When you are done goofing around continue reading.
Designing the page
Before we start coding, we want to visualize our page in a graphics editing program like Adobe Illustrator or XD. The goal of this step is to
- Organize the layout of the page using wireframes or real assets.
- Identify the different objects on the screen which will be created on the
<canvas>with JavaScript
Now we can see all the objects that will be on the page and the next thing to do is export the rocks, floater, shell and Starfish as transparent PNG images. In the next part of this series we will dive into the code and start building our landing page.
Follow us on Twitter or subscribe to this blog below so we can alert you when Part 2 is published.