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:
- <canvas id='canvas’ width= 150 height=150></canvas>
We can set the height and width in CSS. So I am using.
- <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.
- $( document ).ready(function() {
- var canvas = document.getElementById('canvas');
- var context = canvas.getContext('2d');
- context.beginPath();
- context.moveTo(165, 60);
- context.lineTo(200, 40);
- context.strokeStyle = '#008000';
- context.lineWidth = 7;
- context.stroke();
- context.beginPath();
- context.moveTo(200, 40);
- context.lineTo(235, 60);
- context.strokeStyle = '#008000';
- context.lineWidth = 7;
- context.stroke();
- context.beginPath();
- context.moveTo(235, 60);
- context.lineTo(235, 95);
- context.strokeStyle = '#ff0000';
- context.lineWidth = 7;
- context.stroke();
- context.beginPath();
- context.moveTo(235, 95);
- context.lineTo(200, 115);
- context.strokeStyle = '#b8860b';
- context.lineWidth = 7;
- context.stroke();
- context.beginPath();
- context.moveTo(200, 115);
- context.lineTo(165,95 );
- context.strokeStyle = '#888888';
- context.lineWidth = 7;
- context.stroke();
- context.beginPath();
- context.moveTo(165, 95);
- context.lineTo(165, 60);
- context.strokeStyle = '#FFFF00';
- context.lineWidth = 7;
- context.stroke();
- context.font = '30pt Calibri';
- context.strokeStyle = 'black';
- context.strokeText('W', 182, 88);
- });
In the CSS file I am using this code for providing the height and width that are resizable with the screen size.
- #canvas{ width:9vw; height:4.5vw; }
Result
![HTML 5]()