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”

WebSocket Traffic Inspection in Chrome Developer Tools

Just like debugging any other thing, doing the same for websocket traffic can be really useful. Not sure if firebug does that, but inspecting your websocket traffic in chrome dev tools is definitely possible.

Continue reading “WebSocket Traffic Inspection in Chrome Developer Tools”

Image Zoom Magnifying Glass Effect with CSS3 and jQuery

Ever wanted to add a magnifying glass effect to your product images for an awesome zoom-in and a great user experience ? You’ll be surprised to know that using CSS3 and jQuery, it’s really easy to integrate this effect to your website or webapp.

Continue reading “Image Zoom Magnifying Glass Effect with CSS3 and jQuery”

The New and Final CSS3 Linear and Radial Gradients Syntax

The specs have always been in a state of flux. But it seems to be decided on the CSS3 linear and radial gradients syntax finally (hopefully). Let’s just discuss the changes and how you’ll need to modify your current/old code accordingly.

Continue reading “The New and Final CSS3 Linear and Radial Gradients Syntax”

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”