Comments on: HTML5 Canvas For Absolute Beginners – Part 4

By: onlyWebPro

onlyWebPro — Tue, 08 Jan 2013 09:40:00 +0000

Hi sakthivel,

Hmm… From my understanding based on your question, you could just remove the setInterval method, and change some settings of the circle such as x, y property and trigger the draw function in “init function”.

Hope this can help to solve your problem. cheers!

By: sakthivel

sakthivel — Fri, 04 Jan 2013 05:24:00 +0000

Before animation itself , i want to create a full circle in the canvas area(Dont want to hidden).. Is it possible?

By: onlyWebPro

onlyWebPro — Thu, 15 Nov 2012 00:57:00 +0000

Here is the link of “Most Easiest & Simplest Way to Create a Game Using HTML5 Canvas”

http://www.onlywebpro.com/2012/01/14/most-easiest-simplest-way-to-create-a-game-using-html5-canvas/

By: onlyWebPro

onlyWebPro — Thu, 15 Nov 2012 00:54:00 +0000

Hi Ken,

Thank you for your comment.

Regarding your question, I strongly recommend you to read our tutorial – ”

Most Easiest & Simplest Way to Create a Game Using HTML5 Canvas”. We do have cover animate the object in canvas with certain distance.

Please follow us either on facebook page, twitter, or Google+ page.

Regards,
Management of onlyWebPro.com

By: Ken

Ken — Wed, 14 Nov 2012 18:34:00 +0000

Magnificent tutorial! Literally the only site on the internet that has given me an insight to collision in canvas. However, what i’d like to ask is how i could make it animate only a certain distance cos realized that you made the animation infinite. So lets say i press the right arrow, i just want it to move two px to the left. how would i do this? also can i use this algorithm on a div shape, like a square.

By: Brishti55

Brishti55 — Mon, 18 Jun 2012 08:53:00 +0000

hi! could you please tell me how can i change the color of ball?? thanks ^.^

By: Zumzza

Zumzza — Sun, 25 Mar 2012 21:39:00 +0000

Hi!
How to slow down and stop the animation as a real ball ?
Thanks.

By: onlyWebPro

onlyWebPro — Mon, 06 Feb 2012 04:04:00 +0000

Hi George,

Thanks for reading the article. For your problem, you can easily achieve it by removing the if condition in the function of draw.

Remove the following line of code:

if (x + mx > WIDTH || x + mx HEIGHT || y + my < 0)
my = -my;

x += mx;
y += my;

}

Hope it helps!

Stay connected with us via Facebook Fan Page, Twitter or Google Plus Page.

Regards,
The Management of onlyWebPro.com

By: George

George — Sun, 05 Feb 2012 15:33:00 +0000

I don’t want bounce affect. I am trying to achieve more like a penalty shot at a soccer cross bar. which means it should stop at a point than buncing. Any hint would be great. Thanks.

By: Fianna

Fianna — Tue, 18 Oct 2011 16:46:00 +0000

Thank you very much! This tutorial helped a lot!

I am new to all this, but I really want to learn. I managed to do this, but I can’t seem to change the collor of the circle. How do I do this?