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-
ing:
<canvas
<canvas id=
"canvasOne"
width=
"500"
height=
"300"
>
Your browser does not support HTML5 Canvas.
</canvas>
</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:
iid
The
id
is the name we will use to reference this
<canvas>
tag in our JavaScript code.
canvasOne
is the name we will use.
width
The width, in pixels, of the canvas. The
width
will be
500
pixels.
height
The height, in pixels, of the canvas. The
height
will be
300
pixels.
NOTE
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
applications,wewillusethetext“YourbrowserdoesnotsupportHTML5Canvas.”However,
you can adjust this text to say anything.
