CODEWITHSUNDEEP
javascriptcanvas
Thodor20
Thodor20

Reputation: 81

Javascript canvas animating

I want to make a loading bar for my web application and I want to use a html canvas for this. This is the script that I use to fill up the canvas:

<script>
    var canvas = document.getElementById("bar");
    var c = canvas.getContext("2d");

    var xPos = 0;

    draw = function() {
        if(xPos < 300){
            c.rect(0, 0, xPos, 30);
            c.fill(255,0,0);
            xPos += 0.5;
        }
    };
</script>

I tested this code on a online code converter (khan academy) and it worked (of course without the first 2 lines and c. in front of most things), and that is also my trouble I don't know where I have to put c. in front of?

I simplified the page a little bit:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <canvas id="bar"></canvas>
        <script>
            var canvas = document.getElementById("bar");
            var c = canvas.getContext("2d");

            c.fillStyle = "#ff0000"

            draw = function(){
                if(xPos < 300){
                    c.fillRect(0, 0, xPos, 30);
                    xPos += 0.5;
                }
            };
        </script>
    </body>
</html>

Upvotes: 1

Views: 84

Answers (3)

Krzysztof Jabłoński
Krzysztof Jabłoński

Reputation: 1941

Whatever you are trying to draw... this:

draw = function(){
    if(xPos < 300) {
        c.fillRect(0, 0, xPos, 30);
        xPos += 0.5;
    }
};

... it is a definition of variable in global context (context of window object), then assigning a function to it. That's all - it only defines the behavior.

What you need also needs to execute that (a sidenote: to execute it after the canvas is actually created - when you put code in a script tag after canvas tag - it's sufficient and you did it already).

To execute the function use:

draw();

Or don't wrap code in function at all (unless it's to be called multiple times).

Or use a syntax construct to execute the function created in place like this:

(draw = function(){
    if(xPos < 300) {
        c.fillRect(0, 0, xPos, 30);
        xPos += 0.5;
        setTimeout(draw,15); // use this to achieve animation effect
    }
})();


var xPos = 0;
var canvas = document.getElementById("bar");
var c = canvas.getContext("2d");
c.fillStyle = "#FF0000";

var draw;
(draw = function(){
    if(xPos < 300) {
        c.fillRect(0, 0, xPos, 30);
        xPos += 0.5;
        setTimeout(draw,15);
    }
})();
#bar {
  width: 300px;
  height: 50px;
}
<canvas id="bar"></canvas>

Edit: I've been thinking of what you might need, as it's not entirely abvious what you want. I have created this jsfiddle. Maybe it'll be of any help.

Upvotes: 2

fernandodelrio
fernandodelrio

Reputation: 126

You need to call draw for every animation step. You could do this using setTimeout, setInterval or requestAnimationFrame :

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <canvas id="bar"></canvas>
        <script>
            var canvas = document.getElementById("bar");
            var c = canvas.getContext("2d");
            c.fillStyle = "#ff0000";
            xPos=0;
            draw = function(){
                if(xPos < 300){
                    c.fillRect(0, 0, xPos, 30);
                    xPos += 0.5;
                    requestAnimationFrame(draw);
                }
            };
            requestAnimationFrame(draw);
        </script>
    </body>
</html>

Upvotes: 0

DripDrop
DripDrop

Reputation: 1002

Hmmm...

You got some things mixed up. Try this:

<html>
<canvas id = "cvs1" width = "300" height = "30"></canvas>
</html>

And for the script:

var c = document.getElementById("cvs1").getContext("2d");
c.fillStyle = "#ff0000" //Set Fill Color(Set to red)

    if(xPos < 300){
        c.fillRect(xPos, 0, 30, 30);
        xPos += 0.5;
    }

If not:

What you did was use fill and rect seperately. You need to set the color, and then use the fillRect() function to draw the rectangle.

EDIT: You got the x,y,width,height as width,height,x,y. Fixed answer.

Good luck!

Upvotes: 0

Related Questions