HTML and CSS Reference
In-Depth Information
Copying from One Canvas to Another
Thecanvasallowsustouseanothercanvasasthesourceofabitmapdrawingoperation.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>
<body>
<div>
<div>
<canvas
<canvas id=
"canvas"
width=
"256"
height=
"256"
style=
"position: absolute;
top: 50px; left: 50px;"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
<canvas
<canvas id=
"canvas2"
width=
"32"
height=
"32"
style=
"position: absolute;
top: 256px; left: 50px;"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</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:
iif
(
!
canvasSupport
()) {
return
return
;
}
else
else
{
var
var
theCanvas
=
document
.
getElementById
(
"canvas"
);
var
var
context
=
theCanvas
.
getContext
(
"2d"
);
var
var
theCanvas2
=
document
.
getElementById
(
"canvas2"
);
var
var
context2
=
theCanvas2
.
getContext
(
"2d"
);
}
Example 4-17
will use the tile sheet image from earlier examples and draw it to the first can-
vas. 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 to another
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH4EX17: Canvas Copy
</title>
</title>
