Math, Physics, and Animation - HTML5 Canvas - page 252

<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
var shipImage;
function eventWindowLoaded() {
shipImage = new Image();
shipImage.src = "ship.png"
shipImage.onload = eventAssetsLoaded;
}
function eventAssetsLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
var pointImage = new Image();
pointImage.src = "pointwhite.png";
function drawScreen () {
context.fillStyle = '#000000';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#ffffff';
context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);
var dx = ship.endx - ship.x;
var dy = ship.endy - ship.y;
ship.velocityx = dx * easeValue;
ship.velocityy = dy * easeValue;
ship.x += ship.velocityx;
ship.y += ship.velocityy;
//Draw points to illustrate path
points.push({x:ship.x,y:ship.y});
for (var i = 0; i< points.length; i++) {
context.drawImage(pointImage, points[i].x+shipImage.width/2, points[i].y,1,1);
}
context.drawImage(shipImage,ship.x,ship.y);
}