Example of adding Canvas tag to HTML page_html5 tutorial tips

In the of the HTML page, you can use the following code to add the tag:

Copy code

The code is as follows:

Your browser does not support HTML5 Canvas.

Translation Note: For canvas, the following writing is not allowed:

Copy code

The code is as follows:

Let Let's take a look at what the above code does. The tag has three main attributes, including:

1.id. We can use the id value to reference the tag in JavaScript code. In the above code, the id value is canvasOne.
2.width. The width of the canvas, in pixels. In the above code, the width value is 500 pixels.
3.height. The height of the canvas, in pixels. In the above code, the height value is 300 pixels.

Between the start tag and the end tag of Canvas, we can place any text; when the browser that opens the HTML web page does not support Canvas, this text will be displayed in Canvas Where the label is located. In the above code, we are using the text "Your browser does not support HTML5 Canvas."

Use document object to reference canvas element in JavaScript

When the HTML page is loaded, the document object refers to all elements in the page, so we can use DOM to refer to the defined in the above code.

We need a reference to the Canvas object so we know where to display the drawing using the Canvas interface.

First, we define a variable named theCanvas to hold a reference to the Canvas object.

Then, we call the getElementById() function of the document object and set the incoming parameter to canvasOne (the id of the tag in the HTML page) to obtain the Canvas object:

Copy code

The code is as follows:

var theCanvas = document.getElementById("canvasOne");