404 Error Pages – Making a custom 404 page

Sharing is caring!

404 pages are a great way to inform your web users that you have broke your server or that they are too stupid to type in the correct URL. 404 pages in general should be used to signify that the URL used links to no document. Additionally on your 404 page you should have some form of navigation to allow the user to navigate back to your site content. Another good thing to have on your 404 page is some form of logging. If you log the 404 page visits you can see what pages people are trying to view on your site and allow you to fix the cause of the problem. It could be a simple broken link, or misspelled URL allowing you to fix the link or rename the hard to spell URL to a simpler one.

[embedyt] http://www.youtube.com/watch?v=5POQvIg1JzA[/embedyt]

In our 404 page we’re going to add an HTML canvas that will allow the user to change how the 404 appears. Using JavaScript and an HTML canvas we can change the size, colour, shape, gradient, stroke and background for our 404 error message.

Creating The HTML page

To start the error page we first need an html page with a canvas element.

 

Now we have the base for our 404 page we can start adding the JavaScript to control the canvas.

 

The above code should be placed before the </body> tag so it will be loaded after all the other HTML elements have loaded. This JavaScript creates 2 new variables, c for the canvas and ctx for the context of the canvas. The context is what we will be making our JavaScript changes to.

Adding our 404 Characters

As we are making a 404 page we now need to define two 4’s and a 0 that we can use to signify the position of each block that makes up the 404. Below I have 3 arrays, one for each character of the 404.

 

I could have used just one array for both of the 4s but having two means less code.

Now we have our 404 defined we need a function to draw the 404 on the canvas. Our first function will call the draw function for each of the characters.

 

Our second function will draw a single character.

The drawArray function takes the canvas context to draw on, the array of points for the character, the horizontal position and the vertical position as arguments. It then loops through each point. Each point is then drawn to the context using ctx.fillRect for the shadow rectangle, ctx.stroke for the border and ctx.fillRect using the fillStyle grd for the gradient.

Adding Our Controls

The sizeCircle, shadowCircle, fillTopColourCircle etc are the objects we will be using to control the different aspects of the characters. Let’s add them now.

Add the following code to define the control objects:

 

This code defines each of the controls we will be using. The contain the x and y position, their radius (as they will be circles) and their text.

 

We now need to be able to draw them on the canvas. We will use a function to allow us to draw a single control. The code is below:

 

This function takes the canvas context and an object as its arguments. The object is one of the controls we defined earlier. This function just draws the control to the canvas using the ctx.arc function and adds text to the right of the control. The ctx.arc function takes 5 arguments. The x and y position of the circle, the size of the circle, the start of the arc and the end of the arc. Using 0 and 1*Math.PI for the start and end of the arc would create a semi-circle.

 

Now we can draw a single control, let’s add a function to draw all controls so we don’t have to type out a function call each time we want to show a control. To do this we will put all the objects into an array like so:

 

 

Now we create a function to loop through that array calling the draw controls function we just made.

 

Our code up to now doesn’t do much when you run it. This is because we haven’t told it to render and we’re still missing a function to convert our controls position to an RGB colour. So let’s get this done so we can see some changes to our HTML page.

Additional functions and Rendering

Let’s add the control position to colour function first. The function is converted from an hsltoRgb function I found online at http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion.

It has been converted from a 0-255 scaled RGB to a hex string. This allows use to convert control positions to colour values the browser/canvas will understand.

 

Now we need to render everything. So let’s make a function.

 

Here will define our function that will render our 404 characters using screen width /2 and screen height /2 to position them in the middle, render our controls and requestAnimationFrame(render). The requestAnimationFrame function is used to tell the browser that the canvas is ready to draw itself and would like to be drawn when the browser is capable. The requestAnimationFrame function takes a function as an argument and this function must contain the requestAnimationFrame function to create a loop. It is possible to draw to the canvas using setInterval but this will create sync issues with refresh rates whereas requestAniamtionFrame will always try to refresh at a rate that syncs.

 

Now we can save our page and run it. It will show a 1000×1000 canvas with our 404 and controls inside. The display of controls might look misshapen depending on the screen resolution you are using. We will fix hat issue now by adding some code to resize the canvas to fill the browser and while we’re here empty the screen ready for the next render.

 

Above is the clearScreen function which sets the canvas to fill the browser window and then empties the canvas using the clearRect function. Add clearScreen()  as the first item in the render function as shown below:

Part 1 Check

Your code should be similar to the following file html-p1

Events and Mouse Control

Now we have rendered our 404 and our controls its time to allow the user to move the controls. To do that we will need 4 variables to store mx, my, down and attached. mx is the mouse x position, my is the mouse y position, down is whether the mouse button is down and finally attached is the control object that is currently attached to the mouse.

Add the variables near the top of the script with your other vars.

Now we have the variables we need to add event listeners for the mouse events.

Here we have an if conditional that tries to add an event listener if that fails it tries to attach an event listener. This is to allow older browsers which don’t support the addEventListener to still have event listeners. The above listeners just set flags expect the mousemove listener which calls a separate function to get the x and y pos of the mouse. The getMouseXY function code is below:

We can now react to events created by the mouse but we still need to react to clicks on the controls. To do that we will update our render function to monitor our variables we create earlier. Our render code should be changed to:

We also need to add a function to see if the mouse position is over a control. We do that with the following code:

This function loops through each control and checks if the mouse x and mouse y falls inside a control’s position.

 

Each frame we are now checking to see if we have an attached control. If we do not we check to see if the mouse button is down and if the mouse pointer is over a control with the hoveredControl function. If the mouse button is down and the hoveredControl function returns a control then we are trying to move the control so we set the attached variable to the control object and update the control’s position to the mouse x/y. The next rendered frame will have an object in the attached var so will skip this block and only update the positions x/y.

Part 2 Check

You can now save your code and test it in a browser. You should be able to move the controls with the mouse and the 404 characters should change accordingly. If you are getting any errors or it is not responding verify your code matches this file html-p2

 

Some controls still do nothing such as wind direction and background.

The background

The background is made up of 3 different background types with a 4th blank background. The first background we will look at is the starfield background type.

Starfield

The starfield background is a background which tries to imitate flying through space with stars getting closer to the user. This is achieved by creating stars at the center of the screen and they move outward towards the edges getting bigger as they get closer to the edge.

Our first step is to create an array to store each star that is created. While we’re here we may as well add the arrays for the rain and for the bubble clouds.

We will need a function to create a star which we will call each render frame. This would create a star each frame unless we limit the amount of stars per second. We will do that by using the Math.random function and only adding a star each 10% of the time.

The stars object has 5 properties; The x and y position, the x and y velocities and the size. The x and y position is the position the star is at on the canvas. The x and y velocities are the direction the star is moving and is create using (Math.random()  * 2) -1 to create a value between -1 and 1. This is done for both x axis and y axis. The size is set to 0.2 and is then added to the star array.

In order to render the star a renderStar function will be made. It will loop through each item in the star array and then render it to the canvas. The code is below:

To make the star get bigger I increase the size each frame by 1.5% by multiplying the star size by 1.015 each frame. This creates the illusion of the stars getting bigger. I use the value 1.04 for the x and y velocities. Finally, we check to see if the star has gone off the screen and remove it from the array if it has.

So now we have our function to create and render our stars but they are never called in the render function. As we will have 4 backgrounds including the blank one we will use the backgroundCircle position to decide which background to show. Update your render function to look like this.

You can save this and test it in a browser to show the starfield in action. Here’s an updated HTML file including everything we have done so far. html-p3

Rain Background

The rain background creates raindrops at the top of the screen which fall slowly at an angle based on the wind direction control. Since we already have the control we just need to add our add raindrop and render raindrop functions.

We use addDrop to add a new drop, except this time we set the y position to the top of the browser and set the y velocity to 1 so it starts falling downwards. The x velocity is set to 0 so no horizontal movement as this will be set in the renderDrop function.

The renderDrop function loops through each drop in the array and draws a blue circle. The raindrop is then updated using the windCircle control to move it left/right based on the x position of the control and down using the y position of the control. Finally, we check if the drop has gone off the screen and remove it from the array if it has.

Bubble Clouds

Our last background is the bubble clouds. Our create cloud and render cloud functions will be pretty similar to our previous functions for the rain and starfield backgrounds.

In the code above you can see we have and extra function call compareClouds. This function sorts our array of bubble clouds so that the bigger bubbles are drawn first so they appear to be at the back whereas the smaller ones are drawn on top appearing to be at the front.

You now have everything needed to have your own custom 404 error page using canvas and JavaScript. A copy of the complete code can be downloaded here Final Code.

For more information on HTML Canvas visit w3schools at http://www.w3schools.com/html/html5_canvas.asp

Sharing is caring!