Making Company Logo Using Canvas HTML5

In this article we will focus on the <canvas> tag that is a HTML5 element that can be used for drawing 2D graphics using JavaScript. Initially it looks difficult to use but once we start experimenting with it, it becomes as easy as a sketch drawing specialist drawing at x and y coordinates.

For using a <canvas> you should have knowledge of HTML, JavaScript and CSS. The <canvas> element isn't supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300px * 150px (width * height). For customizing the size we can use the height and width property of CSS.

In the following code I will draw a hexagonal multi-color image that looks like a company logo. I am using JavaScript code for drawing the image and I will describe in short what each method is doing. I am drawing six lines to draw a hexagon. To draw a line, we can use the beginPath(), moveTo(), lineTo(), lineWidth, strokeStyle and stroke() methods.

First, we can use the beginPath() method to declare that we are about to draw a new path. Next, we can use the moveTo() method to position the context point (in other words drawing cursor) and then use the lineTo() method to draw a straight line from the starting position to a new position, strokeStyle is used to provide a color to the line and lineWidth is used to provide width to the line. Finally, to make the line visible, we can apply a stroke to the line using stroke().

.beginPath(): A path consists of a list of zero or more subpaths. Each subpath is a list of one or more points that are connected by straight or curved lines. Each subpath also contains a flag that indicates whether the subpath is closed. If a subpath is closed, the last point of the subpath is connected to the first point by a straight line. Sub-paths that have fewer than two points are ignored when the path is painted.

Example
In a HTML file we write:

1. <canvas id='canvas’ width= 150  height=150></canvas>  

We can set the height and width in CSS. So I am using.

1. <canvas id='canvas'></canvas>  

We need to write the following code in the .js file. I am using jQuery for rendering the .js with the image. We can directly use it in a <script> tag in the same HTML page.

1. $( document ).ready(function() {  
2.     var canvas = document.getElementById('canvas');  
3.           var context = canvas.getContext('2d');  
4.           context.beginPath();  
5.           context.moveTo(165, 60);  
6.           context.lineTo(200, 40);  
7.           context.strokeStyle = '#008000';  
8.           context.lineWidth = 7;  
9.           context.stroke();  
10.           context.beginPath();  
11.           context.moveTo(200, 40);  
12.           context.lineTo(235, 60);  
13.           context.strokeStyle = '#008000';  
14.           context.lineWidth = 7;  
15.           context.stroke();  
16.           context.beginPath();  
17.           context.moveTo(235, 60);  
18.           context.lineTo(235, 95);  
19.           context.strokeStyle = '#ff0000';  
20.           context.lineWidth = 7;  
21.           context.stroke();  
22.           context.beginPath();  
23.           context.moveTo(235, 95);  
24.           context.lineTo(200, 115);  
25.           context.strokeStyle = '#b8860b';  
26.           context.lineWidth = 7;  
27.           context.stroke();  
28.           context.beginPath();  
29.           context.moveTo(200, 115);  
30.           context.lineTo(165,95 );  
31.           context.strokeStyle = '#888888';  
32.           context.lineWidth = 7;  
33.           context.stroke();  
34.           context.beginPath();  
35.           context.moveTo(165, 95);  
36.           context.lineTo(165, 60);  
37.           context.strokeStyle = '#FFFF00';  
38.           context.lineWidth = 7;  
39.           context.stroke();  
40.           context.font = '30pt Calibri';  
41.           context.strokeStyle = 'black';  
42.           context.strokeText('W', 182, 88);  
43. });  

In the CSS file I am using this code for providing the height and width that are resizable with the screen size.

1. #canvas{ width:9vw; height:4.5vw; }  

Result