How to Draw onto the Canvas with JavaScript in HTML5


HTML5 is the latest version of html, which is still under development. This tutorial is about how we can draw onto the canvas in JavaScript and html5. In this tutorial we will learn about html5 canvas and java script.

Step #1 – Open IDE

Now, to begin, first we will have to open an IDE, let’s say Dreamweaver. Now, from its menu, choose HTML from Create New.

Create New “HTML” option

Step #2 – Basic Code

Now, for the main code, a basic canvas can be made through this code, where the style attribute is used to define the border of the canvas.

Basic Canvas Code

Step #3 – Using JavaScript

To draw onto the canvas, we will use JavaScript.

Here, first we will locate our canvas, next we call getContext(“2d”) object, which is a built-in HTML5 object used to draw circles, boxes, paths, images, text, etc.

Next two lines are used to draw a color box.

JavaScript Code to draw Canvas

This is how we can work with Html5, canvas and java script collectively to draw objects.