Automatic scroll with HTML 5 canvas

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

It would be more logical to have a canvas that just uses window.innerHeight and to scroll (translate) your context so that you can see your square. But you have to add some sort of background so we can see that the square is moving. I did a fiddle from your code : jsfiddle.net/gamealchemist/MLHQK — GameAlchemist
– GameAlchemist, Commented May 14, 2014 at 6:52
Well its ok later i will be adding some background ... but still i am not able to do it. I have just seen your fiddle but still its not scrolling. :| — Shashank
– Shashank, Commented May 14, 2014 at 7:19
The fiddle is just here to help you and S.O. people to understand issue / suggest a solution. It is a good practice to join such a fiddle to a post. In fact 'scrolling' with an empty background has no sense. You have to do quite a bit of work to get background + some entity + camera management to work. For me your question, although interesting, is too far from a solution to be a valid S.O. question, i suggest you delete it or S.O. people close it as too broad. — GameAlchemist
– GameAlchemist, Commented May 14, 2014 at 8:29
I do get all your points what you are trying to say and if we want any background so we can put it like anything and some text will also be there at that time to show them like moving that is not a big issue but the point is how to do that camera work that's my question ... because i am interested in doing this and this code is just an example... — Shashank
– Shashank, Commented May 14, 2014 at 10:01
-1. S.O. is not about transforming ideas into code. Your question, as it is, is a 'do-it-for-me' question. Seek tutorials, work hard, if you encounter a real problem that resists your attempts, comme back here. Within google's 5 first results (30 seconds search) : bdadam.com/blog/… And now i'm done explaining, good luck. — GameAlchemist
– GameAlchemist, Commented May 14, 2014 at 10:40

Fr3d · Accepted Answer · 2014-05-15 21:57:28Z

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>

Collectives™ on Stack Overflow

Automatic scroll with HTML 5 canvas

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related