Controlling the Frame Rate with requestAnimationFrame

control fps

Limiting the frame rate while using requestAnimationFrame can be a common want especially when coding Games where you want your animations and mechanics to not exceed a particular mark of frames per second. Let’s go through 2 ways of doing it.

Continue reading “Controlling the Frame Rate with requestAnimationFrame”

Optimizing HTML5 Canvas to Improve your Game Performance

So I coded a game this month for the github game compo called “Pappu Pakia“. This is my first HTML5 Game with beautiful graphics by Kushagra. When I was finished with the coding part, it was pretty exciting until I played it a few times when my CPU was busy, then on an old laptop and finally on a mobile device. In all the cases it was laggy, except in the last one where it was super slow. So what do we do now ? Time to Optimize!

Continue reading “Optimizing HTML5 Canvas to Improve your Game Performance”

Different Tools for Our Sketching Application

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”

Canvas Rotating and Scaling Images Around a Particular Point

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 rotate() or 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”

HTML5 Canvas and Friction

So you started moving an object on your canvas by manipulating vx and 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”