HTML and CSS Reference
In-Depth Information
function canvasApp(){
if (!canvasSupport()) {
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
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);
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
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";
Search WWH ::

Custom Search