Automatic scroll with HTML 5 canvas

StackOverflow https://stackoverflow.com/questions/23646971

  •  22-07-2023
  •  | 
  •  

Question

I am having problem related HTML 5 canvas animation.
I have just written this whole code, What it does is that a box keeps moving downwards and exceed the height of the web page due to which scroll option come and because of this i have to scroll down to see where is box.
So my question is : is there any method by which when box moves down it automatically helps user to scroll down just by that animation only ? Meaning when box moves down it also scrolls down which help user to show where the box is moving. And if it comes to background then it will be there it is just a sample.

fiddle is here : http://jsfiddle.net/gamealchemist/MLHQK/ I tried using background scrolling but that too was not working...!

The code is :

css

  body {
    margin: 0px;
    padding: 0px;
  }

html 

<canvas id="myCanvas" width="578" height="1000"></canvas>

javascript 

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function drawRectangle(myRectangle, context) {
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = 'black';
    context.stroke();
}

function animate(myRectangle, canvas, context, startTime) {
    // update
    var time = Date.now() - startTime;

    // pixels / second^2
    var gravity = 200;

    myRectangle.y = 0.5 * gravity * Math.pow(time / 1000, 2);

    if (myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth / 2) {
        myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth / 2;
    }
    lastTime = time;

    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    // draw
    drawRectangle(myRectangle, context);

    // request new frame
    requestAnimFrame(function () {
        animate(myRectangle, canvas, context, startTime);
    });
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var myRectangle = {
    x: 239,
    y: 0,
    width: 100,
    height: 50,
    borderWidth: 5
};

drawRectangle(myRectangle, context);

// wait one second before dropping rectangle
setTimeout(function () {
    var startTime = (new Date()).getTime();
    animate(myRectangle, canvas, context, startTime);
}, 2000);
Was it helpful?

Solution

Adding this to your animate function would solve the problem

delay = 100;
// scroll
if( myRectangle.y - delay > 0 )
    window.scrollTo( 0, myRectangle.y - delay );


Here's an example I made from your code, where I also added a background image, so you can see the box moving properly.

<!DOCTYPE html>
<html>
<head>
<script>
    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    function drawRectangle(myRectangle, context) {
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = 'black';
        context.stroke();
    }

    function animate(myRectangle, canvas, context, startTime) {
        // update
        var time = Date.now() - startTime;

        // pixels / second^2
        var gravity = 200;

        myRectangle.y = 0.5 * gravity * Math.pow(time / 1000, 2);

        if (myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth / 2) {
            myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth / 2;
        }
        lastTime = time;

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        // draw
        drawRectangle(myRectangle, context);

        delay = 100;
        // scroll
        if( myRectangle.y - delay > 0 )
            window.scrollTo( 0, myRectangle.y - delay );

        // request new frame
        requestAnimFrame(function () {
            animate(myRectangle, canvas, context, startTime);
        });
    }

    function load(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        var myRectangle = {
            x: 239,
            y: 0,
            width: 100,
            height: 50,
            borderWidth: 5
        };

        drawRectangle(myRectangle, context);

        // wait one second before dropping rectangle
        setTimeout(function () {
            var startTime = (new Date()).getTime();
            animate(myRectangle, canvas, context, startTime);
        }, 2000);
    }
</script>
</head>
<body background="http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG" style="margin: 0px;padding: 0px;" onload="load();">
    <canvas id="myCanvas" width="578" height="5000"></canvas>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top