CODEWITHSUNDEEP
javascriptcsshtmlcanvas
Shashank
Shashank

Reputation: 1135

Automatic scroll with HTML 5 canvas

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);

Upvotes: 0

Views: 2934

Answers (1)

Fr3d
Fr3d

Reputation: 1265

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>

Upvotes: 1

Related Questions