It is important for our painting application to have different tools like:
- Line tool to draw straight lines.
- Rectangle tool to draw rectangles.
- Circle tool to draw circles.
- Eraser tool for erasing purposes.
- Color tool to choose colors.
- … and more
We have already built our pencil tool in previous parts. In this part, we’ll focus on creating the aforementioned tools.
Continue reading “Different Tools for Our Sketching Application”
Transforming objects in your HTML5 Game or Experiment requires a bit of understanding regarding how they work. The behaviour and end result is not as intuitive as CSS3 transform functions like
scale(). I could quickly show you how to rotate or scale an image with its center as the origin, but it’s going to be super useful to take an indepth look at how the entire system works.
Continue reading “Canvas Rotating and Scaling Images Around a Particular Point”
So you started moving an object on your canvas by manipulating
vy, i.e., velocity on the x and y axis. But then, you just realized that in real world scenarios the speed of an object reduces with time, if there’s no continuous acceleration. Even with an acceleration of X, there will be some friction faced counter-affecting the acceleration.
Continue reading “HTML5 Canvas and Friction”
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.
Continue reading “Drawing Text on HTML5 Canvas”
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”