Making Company Logo Using Canvas HTML5

This article describes the HTML5 element that can be used to draw 2D graphics using JavaScript.

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

HTML 5