Canvas

Sometimes the clearRect(x, y, width, height) method on the canvas context might not erase the previous graphics drawn.

I am going to share a neat little trick that was learnt while working on an HTML5 game recently. The game is pretty much like our HTML5 Doodle Jump .

Transforming objects in your HTML5 Game or Experiment requires a bit of understanding regarding how they work.

Text gradients are super easy to achieve with HTML5 Canvas. Process Here’s the process: Step 1 Create your CanvasGradient object with createLinearGradient .

Moving objects on HTML5 Canvas is really easy. I should have written on this topic before writing on gravity but it’s never too late!

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…

It is important for our painting application to have different tools like: Line tool to draw straight lines. Rectangle tool to draw rectangles.

Limiting the frame rate while using requestAnimationFrame can be a common want especially when coding Games where you want your animations and mechanics to…

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.

In the previous post we kicked off with our painting application using HTML5 canvas.

Creating curves in HTML5 Canvas is usually achieved with quadraticCurveTo() that has 1 control point or bezierCurveTo() that has 2 control points.

Let’s build a simple painting (or sketching) application using HTML5 <canvas> element along with its Javascript API.

Every now and then a new technology releases giving better features and advantages over the previous ones but learning them all without spending a lot of…