Using Javascript and HTML canvas to make Animated Interactive Backgrounds

Sharing is caring!

What is a canvas?

A canvas is similar to a real life physical canvas used by painters. It is basically a space that can be used to draw on. Unlike a real canvas an HTML canvas can have the image data added and removed with ease. Canvases are usually used when you want to have some form of interaction with the user or you want the users computer to do all the computation instead of the server.

What is Javascript?

If you don’t know what Javascript is then I don’t even know why you’re here. Where do you live? where do you come from? is this your first time on this planet? All jokes aside Javascript is just a scripting language used a lot on websites that want some computation done on teh users computer instead of the server.

Create and Inject a canvas

The first thing we need is to create a canvas. We could create a canvas in HTMLthen just get a reference to it in javascript or we can create on in Javascript and inject it into the webpage. I will be showing you the inject method as this allows you to add this script to any HTML page without the need for the HTML to be edited. We add 4 variables for storing information used in other functions and then the setupCanvas function itself. The comments should explain what each part of the code does.

The code above will add a canvas the same height and width of the browser window to the web page when we call it with setupCanvas()

If the browser windo is resized the canvas will no longer be the correct size and this is not what we want. So we will add a resize finction for when this happens:

Handling Events

The setupCanvas function isnt going to run itself and needs some sort fo event to start it. We will want it to run once the page has finished loading so that the correct window width and height is captured. While were doing this will will set up the other events we want to capture for this example:

The window.addEventListener(“load”… function will run once the page finishes loading. Here we create the canvas with setupCanvas, add a timer to run the update function once every 16 milliseconds, run the resize function when the resize event is fired and run the storemp function when the mouse is moved. Dont worry abuot the missing function we are going to add them now:

We now have everything in place except the animation code that draws the images on the canvas.

Drawing on the Canvas

This is the meat of the project where we get to use cool maths..(yeah I said it..COOL MATHS) to draw lines and shapes to the canvas. But before we do that we will add a few variabls which we wil use in the code:

Now we add the drawing code inside our update function we already made:


View it in action

View Source Code or check out some other effects here with links to source code

If you like javascript you could try JSMatter which is a physics engine for javascript

Sharing is caring!

One Reply to “Using Javascript and HTML canvas to make Animated Interactive Backgrounds”

  1. Using setInterval() for animation is bad. setInterval() has tons of issues that can degrade performance. You should use requestAnimationFrame() instead.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.