How to draw graphics using HTML5’s Canvas graphical elements

HTML5 is the latest HTML standard. As I write this article, HTML5 is still actively developing. HTML5 in addition to providing new label information, but also includes the new application programming interface (API), which can enable us to provide more rich multimedia and interactive features on the web page, without the use of proprietary plug-ins. In addition to these, the World Wide Web Consortium has published other relevant technologies, such as location, offline storage, file management, and so on.

will be more like an operating system after HTML5 is launched. In fact, Google’s Chrome OS is based on an operating system that runs various web applications on a Chrome browser. Using HTML5 and other related technologies, we can build applications that blur the boundaries between traditional desktop and WEB.

The Canvas graphical element in


in this article, the author will give a brief description of the new new canvas elements in HTML5. Canvas allows us to draw graphics using scripts on the browser. The author will teach you how to draw a simple triangle in your browser by using the canvas element. Before we begin, you must know that HTML5 and other related technologies are currently compatible with the latest version of the browser. You need to use the latest version of Firefox, Chrome, Safari browser, or ie9.

what is Canvas


canvas is a new label for HTML5, and the code for defining the tag in the page is


< html>

< head>

< title> HTML5 – Hello Triangle< /title>

< /head>

< body>

< canvas id=; canvas; width=; 800 "height="; 600 ">


< /canvas>

< /body>

< /html>

‘s short HTML5 code hasn’t done anything yet. Next, we’ll draw and manipulate elements on the canvas.

canvas settings

On the

canvas, we need to use the coordinate system. >

Leave a Reply

Your email address will not be published. Required fields are marked *