Text gradients are super easy to achieve with HTML5 Canvas.
Continue reading “Canvas Text Gradients for Backgrounds and Strokes”
Category: Tools & Tips
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”
Controlling the Frame Rate with requestAnimationFrame
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”
Drawing Text on HTML5 Canvas
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.
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”
Get the Original Width and Height of an Image
If you use the width and height properties of the image node (vanilla Javascript) or use jQuery’s width() or height() function, you’ll get the size that you see in the browser. Getting the actual dimension (native or natural width/height) of the image is actually quite easy. Let’s see how.
Continue reading “Get the Original Width and Height of an Image”