Web and Mobile Development articles
Sometimes your game or canvas experiment might have one or more layers of animating backgrounds that are set in motion for the player’s movement or some other reason (like creating a parallax effect?). Just had to do something similar the other day. The problem is tricky but with a bit of thinking it seems like I came up with a proper solution!
Continue reading “Moving/Scrolling/Sliding Background in HTML5 Canvas”
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”
Writing Text on canvas is pretty straightforward. All we need to know about is certain properties and methods that are pre-defined on the canvas’s context. You can draw/write all unicode characters using the related methods.
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”
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 curves in HTML5 Canvas is usually achieved with quadraticCurveTo() that has 1 control point or bezierCurveTo() that has 2 control points. In some cases, it might be highly desirable to control the point that the curve hits when drawing with quadraticCurveTo. It is pretty simple, but can be a bit tricky. All it requires, is a little formula that we’ll see in a bit.
Continue reading “Calculate Control Point to Make Your Canvas Curve Hit a Specific Point”