Post
Ask Question

Making Company Logo Using Canvas HTML5

Introduction

 
In this article, we will focus on the <canvas> tag that is an 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
 

Conclusion

 
In this article, we studied Making Company Logo Using Canvas HTML5.


Similar Articles