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”

Moving/Scrolling/Sliding Background in HTML5 Canvas

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”

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”

Calculate Control Point to Make Your Canvas Curve Hit a Specific Point

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”