HERE GOES YOUR TITLE

// DEFINE YOUR GLOBAL VARIABLES HERE

var canvas;
var context;

//var img = new Image();
var flag = false;

var sx, sy, sw, sh, dx, dy, dw, dh;

var speed, fr;

// INITIALIZE THE STARTING FUNCTION

function init() {

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");

img = document.getElementById('filmStrip');

speed = 50;
fr = 0;

return setInterval(anim, speed);

// CALL SUBSEQUENT FUNCTIONS, as many as you need

drawBkgd(); // COVER TRANSPARENT CANVAS

//return (create, 100); // THIS IS WHERE AL HAPPENS

}

function drawBkgd(bx,by,bw,bh) { // USE THIS AREA TO MODIFY BKGD

context.fillStyle = "rgb(255,0,255)";
context.fillRect(0,0,canvas.width,canvas.height);

}

function anim() {

fr += inc;

var numFrames = 16; // = total frames - 1 because of left coordinate

if (fr > numFrames-1 || fr < 1) { inc *= -1; }

sw = 76;
sh = 150;

sx = fr*sw;
sy = 0;

dx = 100;
dy = 100;
dw = 76;
dh = 150;

context.clearRect(dx, dy, dw,dh);
drawBkgd();
context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

fr ++;

document.getElementById("display").innerHTML = fr;

}

</script>

</head>