{"id":1572,"date":"2016-08-10T08:25:15","date_gmt":"2016-08-10T08:25:15","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=1572"},"modified":"2017-11-16T23:13:47","modified_gmt":"2017-11-16T23:13:47","slug":"javascript-lesson-32-creating-graphics-part-2","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/javascript-lesson-32-creating-graphics-part-2\/","title":{"rendered":"JavaScript Lesson 32: Creating Graphics Part 2"},"content":{"rendered":"

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

In the previous lesson, you have learned how to write JavaScript code to draw straight lines on a canvas. In this lesson, we shall learn more advanced skills in creating graphics using JavaScript.<\/p>\n

32.1 Drawing a Rectangle with Solid Color<\/h3>\n

We can draw a rectangle and fill it with a certain color using the fillRect() method. The default color is black. The fillRect() method contains four parameters, as follows:<\/p>\n

fillRect(x,y,w,h)<\/strong>\r\n<\/pre>\n
x=\u00a0The x-coordinate of the upper-left corner of the rectangle
\ny= the y-coordinate of the upper-left corner of the rectangle
\nw=the width \u00a0of the rectangle,(in pixels)
\nh=The height of the rectangle(in pixels)<\/p>\n
The following script draws a rectangle with black color.<\/p>\n
\r\n<canvas id=\"myCanvas\" width=\"300\" height=\"150\" style=\"border:1px solid #d3d3d3;\">\r\n<\/canvas><br><br>\r\n<input type=\"button\" Value=\"Draw Rectangle\" Onclick=\"DrawRect()\">\r\n\r\n<script>\r\n\r\nfunction DrawRect()\r\n{\r\nvar c=document.getElementById(\"myCanvas\");\r\nvar ctx=c.getContext(\"2d\");\r\nctx.fillRect(20,20,150,100);\r\n}\r\n\r\n<\/script>\r\n<\/pre>\n
The Output
\n
\n<\/canvas><\/p>\n
<\/p>\n