Articles tagged “canvas”
-
Building a Firefox OS App for my favorite Internet radio station
I recently created a Firefox OS app for my favourite radio station — radio paradise. It was a lot of fun making this app, so I thought it would be good to share some notes about how I built it. The audio tag It started by implementing the main functionality of the app, playing an […]
-
Building a simple paint game with HTML5 Canvas and Vanilla JavaScript
When the talk is about HTML5 Canvas you mostly hear about libraries to make it work for legacy browsers, performance tricks like off-screen Canvas and ways to draw and animate sprites and tiles. This is only one part of Canvas, though. On the lowest level, Canvas is a way to manipulate pixels of a portion […]
-
Optimizing your JavaScript game for Firefox OS
When developing on a quad core processor with 16 gigabytes of RAM you can easily forget to consider how it will perform on a mobile device. This article will detail some best practices and things to consider for moving a game to Firefox OS or any similar hardware target. Making the best of 256 Mb […]
-
People of HTML5: Joe Lambert unshredding images in Canvas
Today we have a quickie for you: Joe Lambert, a web developer from Southampton, England working for Rareloop took on the Instagram engineering challenge of un-shredding a shredded image but instead of using server-side code, he used HTML5 canvas. Here’s a screencast of his solution to the problem: And here we are in a quick […]
-
Calculated drop shadows in HTML5 canvas
One of the best new features of HTML5 when it comes to visual effects is the canvas element and its API. On the surface, it doesn’t look like much – just a rectangle in the page you can paint on and wipe. Much like an etch-a-sketch. However, the ability to transform, rotate and scale its […]
-
Animating with javascript: from setInterval to requestAnimationFrame
Animating DOM elements[1] or the content of a canvas is a classical use case for setInterval. But the interval is not as reliable as it seems, and a more suitable API is now available… Animating with setInterval To animate an element moving 400 pixels on the right with javascript, the basic thing to do is […]
