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.ExampleIn a HTML file we write:
Grid structure in css