{"id":1533,"date":"2016-07-25T08:14:54","date_gmt":"2016-07-25T08:14:54","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=1533"},"modified":"2017-11-16T23:12:59","modified_gmt":"2017-11-16T23:12:59","slug":"javascript-lesson-31-creating-graphics-using-javascript","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/javascript-lesson-31-creating-graphics-using-javascript\/","title":{"rendered":"JavaScript Lesson 31: Creating Graphics Part 1"},"content":{"rendered":"

<Previous Lesson><\/a>\u00a0[Table of Contents]<\/a>\u00a0<Next Lesson><\/a><\/strong><\/h3>\n

We can use JavaScript to draw graphics on an HTML document. In this lesson, we shall learn how to draw straight lines, triangles, and rectangles with outlines only.<\/p>\n

Before we\u00a0can draw graphics on an HTML document, first\u00a0we need to create a canvas using the <canvas> element. However, we cannot draw any graphics with the Canvas element alone. In order to draw on the canvas, we need to use JavaScript.<\/p>\n

To create the canvas, use the following HTML statement<\/p>\n

<canvas id=”myCanvas” width=”300″ height=”150″ style=”border:1px solid #d3d3d3; background-color:beige;”><\/p>\n

It creates a canvas with width=300 px and height=150 px. We specify the border style and color as well as background color using the style attribute.<\/p>\n

31.1: Drawing a Straight Line<\/h3>\n

To draw a straight line, create the\u00a0DrawLine function as follows:<\/p>\n

function DrawLine()\r\n{\r\nvar c = document.getElementById(\"myCanvas\");\r\nvar cx = c.getContext(\"2d\");\r\ncx.beginPath();\r\ncx.moveTo(80, 20);\r\ncx.lineTo(120, 100);\r\ncx.stroke();\r\n}\r\n<\/pre>\n
The getElementById() method returns the canvas element that has the id\u00a0attribute with the the name myCanvas\u00a0.<\/p>\n
The getContext() method returns an object that provides methods and properties for drawing on the canvas.<\/p>\n
beginPath begin the drawing and MoveTo specify\u00a0the starting point while lineTo specifies the ending point. The Stroke method actually draws the line on the canvas.<\/p>\n
The full JavaScript code integrated with the HTML document is as follows:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<canvas id=\"myCanvas\" width=\"300\" height=\"150\" style=\"border:1px solid #d3d3d3; background-color:beige;\">\r\n<\/canvas><br><br>\r\n<input type=\"button\" Value=\"Draw Line\" Onclick=\"DrawLine()\">\r\n\r\n<script>\r\nfunction DrawLine()\r\n{\r\nvar c = document.getElementById(\"myCanvas\");\r\nvar ctx = c.getContext(\"2d\");\r\nctx.beginPath();\r\nctx.moveTo(80, 20);\r\nctx.lineTo(120, 100);\r\nctx.stroke();\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n<\/pre>\n
The Output<\/strong><\/p>\n

\n<\/canvas><\/p>\n
<\/p>\n