How do I fix my html/javascript code to animate a sprite sheet?

-1

I attempted to animate a sprite sheet using html and javascript to no avail. Here is my sprite sheet

enter image description here

Below is lines 36-59 of my code. I'm not getting any errors so I don't really know what's wrong. How do I fix/improve my code?

This is for a project I'm doing. I've tried using different methods I've found online but none really worked either. I've tried shifting the image as well.

<html>

    <head>

        <title>Tree Animation</title>

    </head>



    <body>



        <canvas id='canvas'></canvas>



        <script>



            var canWidth = 400;

            var canHeight = 100;



            //position where the frame will be drawn

            var x = 0;

            var y = 0;



            var srcX;

            var srcY;



            var sheetWidth = 230;

            var sheetHeight = 79;



            var frameCount = 5;



            var width = sheetWidth/frameCount;

            var height;



            var currentFrame = 0;



            var tree = new Image();

            tree.src = "tree sprite.jpg"



            var canvas = document.getElementById('canvas');

            canvas.width = canWidth;

            canvas.height = canHeight;



            var ctx = canvas.getContext('2d');



            function updateFrame(){

                currentFrame = ++currentFrame%frameCount



                srcX = currentFrame*width;

                srcY = 0;



                ctx.clearRect(x, y, width, height);

            }



            function draw(){

                updateFrame();



            }



            setInterval(function(){

                draw();

            }, 100);



        </script>



    </body>

</html>

I expect the output to be an animation of a tree growing, but instead I'm getting a blank page.

edited Jan 3 at 5:13

asked Jan 3 at 1:51

nourinjh

Hi, would be helpful if you could provide a working demo, thanks

– sol
Jan 3 at 2:18

jsfiddle.net/prashantram/cbf6syjb/5 this is kind of what I want to achieve

– nourinjh
Jan 3 at 4:31

There are too many errors in your code. Please open your browser's dev-tools javascript console. Fix all the errors you find there (first it will complain about undefined variables, then against ctx.draw which is not a function, then maybe about sourceimage being in a broken state etc.) Once this is done, it will be the time to ask for help. But until there are such errors thrown in the console, you are supposed to fixed it, or to ask a question specifically about the error if you can't find how to fix it.

– Kaiido
Jan 3 at 5:04

I updated the code again and fixed the errors you mentioned. I have no errors showing up and it still shows a blank page.

– nourinjh
Jan 3 at 5:14

When I said to fix the errors, I didn't meant remove the lines where the errors are thrown. For instance, height is still undefined, now it's declared and won't throw, but still you can't use it in ctx.clearRect, it will make this call do nothing. ctx.draw was not a function, but you do need something to draw your image on your canvas (it is ctx.drawImage) etc.

– Kaiido
Jan 3 at 5:18

|
show 1 more comment

-1

I attempted to animate a sprite sheet using html and javascript to no avail. Here is my sprite sheet

enter image description here

Below is lines 36-59 of my code. I'm not getting any errors so I don't really know what's wrong. How do I fix/improve my code?

This is for a project I'm doing. I've tried using different methods I've found online but none really worked either. I've tried shifting the image as well.

<html>

    <head>

        <title>Tree Animation</title>

    </head>



    <body>



        <canvas id='canvas'></canvas>



        <script>



            var canWidth = 400;

            var canHeight = 100;



            //position where the frame will be drawn

            var x = 0;

            var y = 0;



            var srcX;

            var srcY;



            var sheetWidth = 230;

            var sheetHeight = 79;



            var frameCount = 5;



            var width = sheetWidth/frameCount;

            var height;



            var currentFrame = 0;



            var tree = new Image();

            tree.src = "tree sprite.jpg"



            var canvas = document.getElementById('canvas');

            canvas.width = canWidth;

            canvas.height = canHeight;



            var ctx = canvas.getContext('2d');



            function updateFrame(){

                currentFrame = ++currentFrame%frameCount



                srcX = currentFrame*width;

                srcY = 0;



                ctx.clearRect(x, y, width, height);

            }



            function draw(){

                updateFrame();



            }



            setInterval(function(){

                draw();

            }, 100);



        </script>



    </body>

</html>

I expect the output to be an animation of a tree growing, but instead I'm getting a blank page.

edited Jan 3 at 5:13

asked Jan 3 at 1:51

nourinjh

Hi, would be helpful if you could provide a working demo, thanks

– sol
Jan 3 at 2:18

jsfiddle.net/prashantram/cbf6syjb/5 this is kind of what I want to achieve

– nourinjh
Jan 3 at 4:31

There are too many errors in your code. Please open your browser's dev-tools javascript console. Fix all the errors you find there (first it will complain about undefined variables, then against ctx.draw which is not a function, then maybe about sourceimage being in a broken state etc.) Once this is done, it will be the time to ask for help. But until there are such errors thrown in the console, you are supposed to fixed it, or to ask a question specifically about the error if you can't find how to fix it.

– Kaiido
Jan 3 at 5:04

I updated the code again and fixed the errors you mentioned. I have no errors showing up and it still shows a blank page.

– nourinjh
Jan 3 at 5:14

When I said to fix the errors, I didn't meant remove the lines where the errors are thrown. For instance, height is still undefined, now it's declared and won't throw, but still you can't use it in ctx.clearRect, it will make this call do nothing. ctx.draw was not a function, but you do need something to draw your image on your canvas (it is ctx.drawImage) etc.

– Kaiido
Jan 3 at 5:18

|
show 1 more comment

-1

I attempted to animate a sprite sheet using html and javascript to no avail. Here is my sprite sheet

enter image description here

Below is lines 36-59 of my code. I'm not getting any errors so I don't really know what's wrong. How do I fix/improve my code?

This is for a project I'm doing. I've tried using different methods I've found online but none really worked either. I've tried shifting the image as well.

<html>

    <head>

        <title>Tree Animation</title>

    </head>



    <body>



        <canvas id='canvas'></canvas>



        <script>



            var canWidth = 400;

            var canHeight = 100;



            //position where the frame will be drawn

            var x = 0;

            var y = 0;



            var srcX;

            var srcY;



            var sheetWidth = 230;

            var sheetHeight = 79;



            var frameCount = 5;



            var width = sheetWidth/frameCount;

            var height;



            var currentFrame = 0;



            var tree = new Image();

            tree.src = "tree sprite.jpg"



            var canvas = document.getElementById('canvas');

            canvas.width = canWidth;

            canvas.height = canHeight;



            var ctx = canvas.getContext('2d');



            function updateFrame(){

                currentFrame = ++currentFrame%frameCount



                srcX = currentFrame*width;

                srcY = 0;



                ctx.clearRect(x, y, width, height);

            }



            function draw(){

                updateFrame();



            }



            setInterval(function(){

                draw();

            }, 100);



        </script>



    </body>

</html>

I expect the output to be an animation of a tree growing, but instead I'm getting a blank page.

edited Jan 3 at 5:13

asked Jan 3 at 1:51

nourinjh

I attempted to animate a sprite sheet using html and javascript to no avail. Here is my sprite sheet

enter image description here

Below is lines 36-59 of my code. I'm not getting any errors so I don't really know what's wrong. How do I fix/improve my code?

This is for a project I'm doing. I've tried using different methods I've found online but none really worked either. I've tried shifting the image as well.

<html>

    <head>

        <title>Tree Animation</title>

    </head>



    <body>



        <canvas id='canvas'></canvas>



        <script>



            var canWidth = 400;

            var canHeight = 100;



            //position where the frame will be drawn

            var x = 0;

            var y = 0;



            var srcX;

            var srcY;



            var sheetWidth = 230;

            var sheetHeight = 79;



            var frameCount = 5;



            var width = sheetWidth/frameCount;

            var height;



            var currentFrame = 0;



            var tree = new Image();

            tree.src = "tree sprite.jpg"



            var canvas = document.getElementById('canvas');

            canvas.width = canWidth;

            canvas.height = canHeight;



            var ctx = canvas.getContext('2d');



            function updateFrame(){

                currentFrame = ++currentFrame%frameCount



                srcX = currentFrame*width;

                srcY = 0;



                ctx.clearRect(x, y, width, height);

            }



            function draw(){

                updateFrame();



            }



            setInterval(function(){

                draw();

            }, 100);



        </script>



    </body>

</html>

I expect the output to be an animation of a tree growing, but instead I'm getting a blank page.

javascript html css sprite sprite-sheet

edited Jan 3 at 5:13

asked Jan 3 at 1:51

nourinjh

edited Jan 3 at 5:13

asked Jan 3 at 1:51

nourinjh

edited Jan 3 at 5:13

asked Jan 3 at 1:51

nourinjh

asked Jan 3 at 1:51

nourinjh

asked Jan 3 at 1:51

nourinjh

Hi, would be helpful if you could provide a working demo, thanks

– sol
Jan 3 at 2:18

jsfiddle.net/prashantram/cbf6syjb/5 this is kind of what I want to achieve

– nourinjh
Jan 3 at 4:31

There are too many errors in your code. Please open your browser's dev-tools javascript console. Fix all the errors you find there (first it will complain about undefined variables, then against ctx.draw which is not a function, then maybe about sourceimage being in a broken state etc.) Once this is done, it will be the time to ask for help. But until there are such errors thrown in the console, you are supposed to fixed it, or to ask a question specifically about the error if you can't find how to fix it.

– Kaiido
Jan 3 at 5:04

I updated the code again and fixed the errors you mentioned. I have no errors showing up and it still shows a blank page.

– nourinjh
Jan 3 at 5:14

When I said to fix the errors, I didn't meant remove the lines where the errors are thrown. For instance, height is still undefined, now it's declared and won't throw, but still you can't use it in ctx.clearRect, it will make this call do nothing. ctx.draw was not a function, but you do need something to draw your image on your canvas (it is ctx.drawImage) etc.

– Kaiido
Jan 3 at 5:18

|
show 1 more comment

Hi, would be helpful if you could provide a working demo, thanks

– sol
Jan 3 at 2:18

jsfiddle.net/prashantram/cbf6syjb/5 this is kind of what I want to achieve

– nourinjh
Jan 3 at 4:31

There are too many errors in your code. Please open your browser's dev-tools javascript console. Fix all the errors you find there (first it will complain about undefined variables, then against ctx.draw which is not a function, then maybe about sourceimage being in a broken state etc.) Once this is done, it will be the time to ask for help. But until there are such errors thrown in the console, you are supposed to fixed it, or to ask a question specifically about the error if you can't find how to fix it.

– Kaiido
Jan 3 at 5:04

I updated the code again and fixed the errors you mentioned. I have no errors showing up and it still shows a blank page.

– nourinjh
Jan 3 at 5:14

When I said to fix the errors, I didn't meant remove the lines where the errors are thrown. For instance, height is still undefined, now it's declared and won't throw, but still you can't use it in ctx.clearRect, it will make this call do nothing. ctx.draw was not a function, but you do need something to draw your image on your canvas (it is ctx.drawImage) etc.

– Kaiido
Jan 3 at 5:18

Hi, would be helpful if you could provide a working demo, thanks

– sol
Jan 3 at 2:18

jsfiddle.net/prashantram/cbf6syjb/5 this is kind of what I want to achieve

– nourinjh
Jan 3 at 4:31

There are too many errors in your code. Please open your browser's dev-tools javascript console. Fix all the errors you find there (first it will complain about undefined variables, then against ctx.draw which is not a function, then maybe about sourceimage being in a broken state etc.) Once this is done, it will be the time to ask for help. But until there are such errors thrown in the console, you are supposed to fixed it, or to ask a question specifically about the error if you can't find how to fix it.

– Kaiido
Jan 3 at 5:04

I updated the code again and fixed the errors you mentioned. I have no errors showing up and it still shows a blank page.

– nourinjh
Jan 3 at 5:14

When I said to fix the errors, I didn't meant remove the lines where the errors are thrown. For instance, height is still undefined, now it's declared and won't throw, but still you can't use it in ctx.clearRect, it will make this call do nothing. ctx.draw was not a function, but you do need something to draw your image on your canvas (it is ctx.drawImage) etc.

– Kaiido
Jan 3 at 5:18

|
show 1 more comment

1 Answer
1

active

oldest

votes

-1

you should provide more code or a snippet, there are several variables didn't show up in your code

and it's hard to debug your code if u use setInterval, you should make sure your code can work first.

maybe you can try step by step:

draw the whole img on the canvas first. if it works, go next

invoke your draw() function manually, check if the img drawed

invoke more, such assetTimout(draw, 1000), check the result

ok, and i think you can console.log these variables in draw

answered Jan 3 at 3:01

Johnson Lee

192

I'm kind of a beginner, can you explain what you mean by drawing the whole img on the canvas? (I updated my code above)

– nourinjh
Jan 3 at 4:30

you need check the document of drawImage : https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

– Johnson Lee
Jan 3 at 5:44

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015407%2fhow-do-i-fix-my-html-javascript-code-to-animate-a-sprite-sheet%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

-1

you should provide more code or a snippet, there are several variables didn't show up in your code

and it's hard to debug your code if u use setInterval, you should make sure your code can work first.

maybe you can try step by step:

draw the whole img on the canvas first. if it works, go next

invoke your draw() function manually, check if the img drawed

invoke more, such assetTimout(draw, 1000), check the result

ok, and i think you can console.log these variables in draw

answered Jan 3 at 3:01

Johnson Lee

192

I'm kind of a beginner, can you explain what you mean by drawing the whole img on the canvas? (I updated my code above)

– nourinjh
Jan 3 at 4:30

you need check the document of drawImage : https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

– Johnson Lee
Jan 3 at 5:44

add a comment |

-1

you should provide more code or a snippet, there are several variables didn't show up in your code

and it's hard to debug your code if u use setInterval, you should make sure your code can work first.

maybe you can try step by step:

draw the whole img on the canvas first. if it works, go next

invoke your draw() function manually, check if the img drawed

invoke more, such assetTimout(draw, 1000), check the result

ok, and i think you can console.log these variables in draw

answered Jan 3 at 3:01

Johnson Lee

192

I'm kind of a beginner, can you explain what you mean by drawing the whole img on the canvas? (I updated my code above)

– nourinjh
Jan 3 at 4:30

you need check the document of drawImage : https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

– Johnson Lee
Jan 3 at 5:44

add a comment |

-1

you should provide more code or a snippet, there are several variables didn't show up in your code

and it's hard to debug your code if u use setInterval, you should make sure your code can work first.

maybe you can try step by step:

draw the whole img on the canvas first. if it works, go next

invoke your draw() function manually, check if the img drawed

invoke more, such assetTimout(draw, 1000), check the result

ok, and i think you can console.log these variables in draw

answered Jan 3 at 3:01

Johnson Lee

192

you should provide more code or a snippet, there are several variables didn't show up in your code

and it's hard to debug your code if u use setInterval, you should make sure your code can work first.

maybe you can try step by step:

draw the whole img on the canvas first. if it works, go next

invoke your draw() function manually, check if the img drawed

invoke more, such assetTimout(draw, 1000), check the result

ok, and i think you can console.log these variables in draw

answered Jan 3 at 3:01

Johnson Lee

192

answered Jan 3 at 3:01

Johnson Lee

192

answered Jan 3 at 3:01

Johnson Lee

192

answered Jan 3 at 3:01

Johnson Lee

192

I'm kind of a beginner, can you explain what you mean by drawing the whole img on the canvas? (I updated my code above)

– nourinjh
Jan 3 at 4:30

you need check the document of drawImage : https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

– Johnson Lee
Jan 3 at 5:44

add a comment |

I'm kind of a beginner, can you explain what you mean by drawing the whole img on the canvas? (I updated my code above)

– nourinjh
Jan 3 at 4:30

you need check the document of drawImage : https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

– Johnson Lee
Jan 3 at 5:44

I'm kind of a beginner, can you explain what you mean by drawing the whole img on the canvas? (I updated my code above)

– nourinjh
Jan 3 at 4:30

you need check the document of drawImage : https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

– Johnson Lee
Jan 3 at 5:44

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu