Font Awesome With HTML5 Canvas

Preview Canvas Menu

Font Awesome With Canvas - Menu Design

Font Awesome is really awesome. Providing more than 500 icons and that too are vector based. Using them with HTML5 Canvas is easy. Lets start by creating a simple menu screen with icons in Canvas.

1. Downloading the Font Awesome Package

Go to Font Awesome website.
Download the files from the page by clicking the download button.
Extract the files in a folder. Files will have a structure as shown below -

Font Awesome Folder Structure

2. Using the Font file

Create a new folder for the application named Canvas Menu Screen.
Copy the font folder (highlighted) into this folder.
Create a simple HTML file named index.html as shown below -

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Menu Screen</title>
    <meta name="viewport" content="width=device-width, 
 initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">
 @font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.ttf');
  font-weight: normal;
  font-style: normal;
 }
 #stage{font-family:FontAwesome;} <!-- THIS STEP IS REQUIRED-->
 canvas{border:1px solid #CCC;}
    </style> 
</head>
<body>
<div id="stage">
 <canvas id="menuScreen" width="320" height="480"></canvas>
</div>
<script> 
<!-- MAGIC HAPPENS HERE-->
</script>
</body>
</html>

3. Canvas Code To Render Icons

Copy the below the code and place it between  in above HTML.

 //Getting canvas context and clearing out.
 var canvas = document.getElementById("menuScreen");
 var context = canvas.getContext("2d");
 context.clearRect(0, 0, canvas.width, canvas.height);
 
 // Filling out the background with color and stroking it.
 context.fillStyle = "#F4BD24"; // Use any background color of your choice.
 context.beginPath();
 context.rect(0,0,canvas.width,canvas.height);
 context.fill();
 
 context.lineWidth = 10; // Width of the stroke i.e. border around canvas or outline.
 context.strokeStyle = "#393305"; // Use any color of your choice.
 context.stroke();
 
 // Why setTimeout - Because it takes time to load FontAwesome Fonts file.
 setTimeout(function(){
 context.fillStyle = "#393305";
 context.font = '140px FontAwesome';// You can use any font size of your size.  
 // Motorcycle Icon at x = 80(from the left) and y = 200(from the top)
 context.fillText("\uf21c",80,200);

 context.font = '45px FontAwesome';  
 context.fillText("\uf04b",90,380);// Play Icon
 context.fillText("\uf013",140,380);// Gear Icon
 context.fillText("\uf1e0",190,380);// Share Icon
 
 context.font = "bold 30px Arial";
 context.fillText("BIKE RIDER",80,240);
 },1000);

4. Explanation

Did you notice the values inside context.fillText()? It's "\uf21c", "\uf04b". What the heck is this?

These are nothing just the Unicode representation of characters in HEX format. So many jargons. So where do we get these values from?

These are provided in font-awesome.css file contained in CSS folder which you downloaded from the Font Awesome Page. For every icon there is a corresponding value that you need to provide in the fillText() of canvas context.

Code provided in font-awesome.css file is like "\f21c". You just have to add "u" after slash (\). For example- If you want to use motorcycle - search motorcyle in file, it will have something like this -

.fa-motorcycle:before {
content: "\f21c";
}

For "\f21c" , use - "\uf21c" (Just add "u" after slash in the content while using it in context.fillText i.e. context.fillText("\uf21c",x,y); )

Or if you want to use heart, search heart in file, it will have something like this -

.fa-heart:before {
content: "\f004";
}

For "\f004" , use - "\uf004" and so on.

Refer the screenshot below:

Steps to search code and using it in Canvas.

See us typing the code in front of you. Watch this video and use Font Awesome with your HTML5 Game or App.

Hope you like this article. Please comment for any query or doubt. You may also like our article of Font Awesome On Android. Have a look.

Search

CheezyCode