HTML and CSS Reference
In-Depth Information
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var theCanvas2 = document.getElementById("canvas2");
var context2 = 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 to another
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH4EX17: Canvas Copy</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var theCanvas2 = document.getElementById("canvas2");
var context2 = theCanvas2.getContext("2d");
}
var tileSheet = new Image();
tileSheet.addEventListener('load', eventSheetLoaded , false);
tileSheet.src="tanks_sheet.png";
function eventSheetLoaded() {
startUp();
}
