I am looking to create a function that scrolls an image element x pixels over y time on an HTML5 canvas, using requestAnimationFrame and delta time. What I can't figure out is how to add more arguments to my function, when requestAnimationFrame allready calls back my function with one argument (a DOMHighResTimeStamp). I am pretty sure the following code doesn't work:
function scroll(timestamp, distanceToScroll, secondsToScroll) {
//delta = how many milliseconds have passed between this and last draw
if (!lastDraw) {var lastDraw = timestamp;};
delta = (0.5 + (timestamp - lastDraw)) << 0; //bitwise hack for rounding integers
lastDraw = timestamp;
//speed (pixels per millisecond) = amount of pixels to move / length of animation (in milliseconds)
speed = distanceToScroll / secondsToScroll;
//new position = current position + (speed * delta)
position += (speed * delta);
context.drawImage(myImage,0,position,50,50/*of 200*/,0,0,100,100);
requestAnimationFrame(scroll(timestamp, distanceToScroll, secondsToScroll));
};
//later...
scroll(timestamp, 100, 5)
scroll(timestamp, 10, 20)
My question is I have no idea how to force requestAnimationFrame to continute to call my scroll function with my additional parameters, when all it does by default is pass just one argument (a timestamp) on callback. So how do I go about adding more parameters (or forcing rAF to put the timestamp in my 'timestamp' argument)?
What your requestAnimationFrame
statement evaluates to:
scroll(timestamp, distanceToScroll, secondsToScroll)
, where timestamp is undefined. It throws an error or returns undefinedwindow.requestAnimationFrame
is executed without parameters, thus no callbackPassing an anonymous function that calls scroll
with the desired parameters should do the trick:
requestAnimationFrame(function(timestamp) {
scroll(timestamp, distanceToScroll, secondsToScroll));
});
What this evaluates to:
window.requestAnimationFrame
is called with anonymous function as callbacktimestamp
as first parameterscroll
is called with current timestamp
, distanceToScroll
and secondsToScroll
as parameters