April 2013
Beginner
750 pages
20h 21m
English
Content preview from HTML5 Canvas, 2nd EditionBecome an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Adding Canvas to the HTML Page
In the <body> section of
the HTML page, add a <canvas> tag using code such as the
following:
<canvasid="canvasOne"width="500"height="300">Your browser does not support HTML5 Canvas.</canvas>
Now, let’s break this down to understand what we are doing. The
<canvas> tag has three main
attributes. In HTML, attributes are set within
pointy brackets of an HTML tag. The three attributes we need to set
are:
idThe
idis the name we will use to reference this<canvas>tag in our JavaScript code.canvasOneis the name we will use.widthThe width, in pixels, of the canvas. The
widthwill be500pixels.heightThe height, in pixels, of the canvas. The
heightwill be300pixels.
Note
HTML5 elements, including canvas, have many more attributes: tabindex, title, class, accesskey, dir, draggable, hidden, and so on.
Between the opening <canvas> and closing </canvas> tags, you can put text that
will be displayed if the browser executing the HTML page does not
support Canvas. For our Canvas applications, we will use the text “Your
browser does not support HTML5 Canvas.” However, you can adjust this
text to say anything.
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.