HTML5 Canvas Particles Fountain Explosion with Gravity

One of my previous posts talked about implementing gravity in our canvas experiments. Eventually, we made a realistic bouncing ball. We’ll kind of extend that experiment to make a quick fountain explosion on canvas obeying gravity.

Continue reading “HTML5 Canvas Particles Fountain Explosion with Gravity”

Basics of Implementing Gravity with HTML5 Canvas

Gravity

When creating some canvas experiments like a particle emission system or a game, gravity can be a key feature to implement. Figuring out how to implement gravity on an object in terms of coding can be a bit confusing. We’ll try to comprehend it, by putting it into code in a simplified manner. I liek simplicity!

Continue reading “Basics of Implementing Gravity with HTML5 Canvas”

HTML5 Canvas Drawing Lines with Smooth Edges

In the previous post we kicked off with our painting application using HTML5 canvas. If you remember well, we ended up with a basic app where one can easily draw lines or something else with a “pencil” tool. But there was a problem. When drawing different shapes like circles, the lines/curves had jagged edges. They were not smooth or anti-aliased, whatever you want to call them. This article will aim towards solving those issues.

Continue reading “HTML5 Canvas Drawing Lines with Smooth Edges”

Creating a Paint Application with HTML5 Canvas

Let’s build a simple painting (or sketching) application using HTML5 <canvas> element along with its Javascript API. Although the app will be small, there’s going to be quite a bit of information for intake. So I’ll break the entire process into different tutorials (posts).
Continue reading “Creating a Paint Application with HTML5 Canvas”

17 Neat HTML5 Games To Keep You Busy This Weekend

Flash games are old and technology is advancing. I have collected some amazing HTML5 games that you can play this weekend and keep yourself busy. They are in random order (no ranking or anything else). Make sure you are using a modern browser that supports HTML5 and Canvas.

Continue reading “17 Neat HTML5 Games To Keep You Busy This Weekend”

The Real Beauty of CSS3 Box Shadows

You might have used CSS3 box shadows several times to create some pretty looking drop shadows like you do in Photoshop. That’s great! But do you even know how it can be used for some other mind boggling purposes ? If not, then you are definitely going to like what I am about to show you.
Continue reading “The Real Beauty of CSS3 Box Shadows”