CODEWITHSUNDEEP
javascripthtmlcss
Lupos
Lupos

Reputation: 906

javascript Canvas Animation with setInterval

I have a problem in my code it dont work and i dont find the misstakes i think the misstakes is because the many nesting and i have set a bracket on the wrong place. The Function from the code is a Animation in the Animation are some images at the top of the canvas and than should this images slowly came from the top to the bottom like a watterfall.i hope you can understand my explanation.

console.log("hey");
            var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d'); //ctx = contex
                var img = new Image();
                img.src="../img/cookie.png";

            canvas.width = canvas.scrollWidth;
            canvas.height = canvas.scrollHeight;


img.onload = function() {
                console.log("Loaded image")
                var add = 10;
                var id  = setInterval(function () {

                        if (add == 500) {

                                    ctx.clearRect(0, 0, canvas.width, canvas.height)

                                    ctx.beginPath();
                                    ctx.rect(0, 0, 1000, 1000);
                                    ctx.fillStyle = "lightblue";
                                    ctx.fill();

                                    ctx.drawImage(img,0 , 0, 100, 100);
                                    ctx.drawImage(img,100,0, 100, 100);
                                    ctx.drawImage(img,200,0, 100, 100);
                                    ctx.drawImage(img,300,0, 100, 100);
                                    ctx.drawImage(img,400,0, 100, 100);
                                    ctx.drawImage(img,500,0, 100, 100);
                                    ctx.drawImage(img,600,0, 100, 100);
                                    ctx.drawImage(img,700,0, 100, 100);

        } else {

                ctx.clearRect(0, 0, canvas.width, canvas.height)

                ctx.beginPath();
                ctx.rect(0, 0, 1000, 1000);
                ctx.fillStyle = "lightblue";
                ctx.fill();

                ctx.drawImage(img,0 , add, 100, 100);
                ctx.drawImage(img,100,add, 100, 100);
                ctx.drawImage(img,200,add, 100, 100);
                ctx.drawImage(img,300,add, 100, 100);
                ctx.drawImage(img,400,add, 100, 100);
                ctx.drawImage(img,500,add, 100, 100);
                ctx.drawImage(img,600,add, 100, 100);
                ctx.drawImage(img,700,add, 100, 100);

                add++;
            }
        }, 10)
  }

PS:sorry if some misstakes in my text but i am still student. :D

PPS: thanks for the help.

EDIT: Now it works thanks for the help. **EDit2:**now i have a nother problem the code will only exectude one time but it should excetuded the full time if anybody can help me i am very danbar.

Upvotes: 1

Views: 509

Answers (3)

Watilin
Watilin

Reputation: 286

To address any doubts you may have with brackets, many editors and web services can perform code beautifying (aka pretty printing) for you. Give it a Google. Also, there’s one such tool build into Firefox with the Shift+F4 “slate”, just paste your code in it and hit Ctrl+P.

I think you’re not loading your image the right way. Be aware that setting an image’s src attribute is what actually triggers its loading. As is, your code can’t load the image since the instruction that sets src is inside the onload handler. Put it after.

When dealing with animations, setInterval is not the best suited function. Prefer requestAnimationFrame. Its syntax is very close and it has CPU-saving capabilities.

Upvotes: 1

mjkaufer
mjkaufer

Reputation: 4206

I think all of your brackets are in the right place. The big error I see is that your if statement says if (add = 1000) using single = instead of double ==. This means that you're setting add to 1000 in your if statement instead of comparing it.

Edit: Another issue you had was that your image src was being defined in its onload, which doesn't really make sense, as the onload waits for src to be loaded.

I made a jsfiddle here where your code works, check it out: https://jsfiddle.net/pjkmwvp6/

Upvotes: 1

SoEzPz
SoEzPz

Reputation: 15912

Can you try changing this???

// Change this
if(add = 1000){

// To this
if(add === 1000){

Upvotes: 1

Related Questions