HTML and CSS Reference
In-Depth Information
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
}
drawScreen();
function drawScreen() {
//make changes here
context.fillStyle = '#aaaaaa';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#000000';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText ("Canvas!", 0, 0);
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Image Basics
The Canvas API allows access to the DOM-defined
Image
object type through the use
of the
drawImage()
method. The image can be defined in HTML, such as:
<img src="ship1.png" id="spaceship">
Or it can be defined in JavaScript. We create a new JavaScript
Image
instance like this:
var spaceShip = new Image();
We can then set the file source of the image by assigning a URL to the
src
attribute of
our newly created
Image
object:
spaceShip.src = "ship1.png";
