HTML and CSS Reference
In-Depth Information
Adding Canvas to the HTML Page
In the <body> section of the HTML page, add a <canvas> tag using code such as the follow-
<canvas id= "canvasOne" width= "500" height= "300" >
Your browser does not support HTML5 Canvas.
Now,let'sbreakthisdowntounderstandwhatwearedoing.The <canvas> taghasthreemain
attributes . In HTML, attributes are set within pointy brackets of an HTML tag. The three at-
tributes we need to set are:
The id is the name we will use to reference this <canvas> tag in our JavaScript code.
canvasOne is the name we will use.
The width, in pixels, of the canvas. The width will be 500 pixels.
The height, in pixels, of the canvas. The height will be 300 pixels.
HTML5 elements, including canvas , have many more attributes: tabindex , title , class , access-
key , dir , draggable , hidden , and so on.
Between the opening <canvas> and closing </canvas> tags, youcan put text that will be dis-
played if the browser executing the HTML page does not support Canvas. For our Canvas
you can adjust this text to say anything.
Search WWH ::

Custom Search