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.
Copying from One Canvas to Another
The canvas allows us to use another canvas as the source of a bitmap drawing operation. Let’s take a quick look at how we might utilize this functionality.
We will need to modify the base file for this chapter and create
an extra <canvas>
tag in our HTML. We will name this extra <canvas> element canvas2. (It can be given any ID as long as it
is not the same ID as the first <canvas>.) Here is what our HTML <body> will look like now:
<body><div><canvasid="canvas"width="256"height="256"style="position: absolute;top: 50px; left: 50px;">Your browser does not support HTML5 Canvas.</canvas><canvasid="canvas2"width="32"height="32"style="position: absolute;top: 256px; left: 50px;">Your browser does not support HTML5 Canvas.</canvas></div></body>
We will place the second <canvas> below the original and give it a
width and height of 32.
We will also need to create a new context and internal reference variable
for canvas2. Here is the code that will
be used to provide a reference to both <canvas> elements:
if(!canvasSupport()){return;}else{vartheCanvas=document.getElementById("canvas");varcontext=theCanvas.getContext("2d");vartheCanvas2=document.getElementById("canvas2");varcontext2=theCanvas2.getContext("2d");}
Example 4-17 will use the tile sheet image from earlier examples and draw it to the first canvas. It will then copy a 32×32 square from this canvas and place it on the second canvas.
Example 4-17. Copying from one canvas ...
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.