View Full Version : How do I convert this to HTML5 with canvas?

03-02-2012, 10:41 AM
Hi there!
I found this code, in reply to someone's problem, on this forum.
I have altered it to my own needs, as it's an excellent piece of code.
However, I would like it to run under HTML5. I believe I need to add
"canvas" code to do the same??
I have already changed the doctype! HTML heading etc.,
Can anyone help?
Many, many thanks!!

<!doctype html>
<meta charset=UTF-8" />
<title>Crazy Rally - France</title>
<script type="text/javascript">
var frames = new Array();

//load frames into array
for(var i = 1; i < 417; i++){
frames[i] = new Image(480,320);
frames[i].src = "track" + i + ".png";

var currentFrameNumber = 1;
var fps = 30; // frames / second
const speed = 1000 / fps; // milliseconds
//var speed = 33;

function nextFrame( )
document.getElementById("display").src = frames[currentFrameNumber].src;
currentFrameNumber = ( currentFrameNumber + 1 ) % frames.length;
setTimeout( nextFrame, speed );
window.onload = nextFrame;
<img id="display" src="track1.png" width="480" height="320">

03-02-2012, 10:57 AM
No need for canvas here, your code is perfectly HTML5 compliant already ... except for

- the missing " beginning quote character in line 3
- the missing alt attribute for the img element

See W3C Validator (http://validator.w3.org) for further questions regarding (X)HTML compliance

03-02-2012, 12:06 PM
Thanks for the info!
I've made the changes, but although I've loaded up 10 images in my image folder, I can't get the site to fire up in my Safari browser in the iPhone.
I've saved this file as the index.html just the same as for previous web apps I've tried out, and the images aren't big - only 40kbs each.
Any ideas where I've gone wrong? And, yes, the images folder is a direct sub-folder on my web-hosting!!
Are you sure this will work as a HTML5 web app file?
Thanks again! ps runs OK in my Firefox browser..