HTML5 Canvas won. Flash was officially killed by Adobe in December 2020. This little speedometer still renders perfectly in every modern browser — but nobody hand-rolls gauge widgets anymore. D3.js, Chart.js, or even pure CSS can do this with a fraction of the effort. Still, 52 stars and 17 forks on GitHub — not bad for a weekend project from 2009. And my friend who wrote the original? He was basically Claude before Claude was a thing — shipping production code at machine speed while the rest of us were still reading the docs.
The <canvas> element is the new shiny thing. Safari and Firefox support it, Chrome just shipped, and Internet Explorer… well, let’s not talk about Internet Explorer. Flash is how you do anything graphical on the web. A friend of mine — one of the most brilliant engineers I know, the kind of person who implements a filesystem overnight and a kernel in a week — shares with me a speedometer gauge widget he wrote as public domain code. It’s cool, but a bit crude. So I take it, refactor the whole thing into proper object-oriented JavaScript, add theming support, work around Firefox’s quirks, and write documentation.
Five layers deep
His key insight is performance. Redrawing an entire gauge on every frame is wasteful — the bezel, the ticks, the numbers never change. He stacks five separate canvas elements on top of each other: background, dial markings, threshold arc, needle, and gloss overlay. When the value changes, only the needle layer redraws. Everything else stays put. I just gaze at it and think: this is brilliant.
My part: packaging the engine
What I do is rework the whole thing for reuse. I extend CanvasRenderingContext2D with helper methods like fillEllipse(), fillPolygon(), and strokeBoxedArc(), add proper object orientation, theming support, and make the gauge fully configurable: min/max values, start/end angles, tick spacing, color threshold, and a toggleable glossy overlay.
The real pain is cross-browser compatibility. Firefox has its own non-standard text rendering APIs (mozPathText and friends) that I have to polyfill. And for IE? Microsoft’s own excanvas library translates Canvas calls to VML — a vector markup language that ships with IE since version 5. It works. Barely.
Try it
The canvas-speedometer is on GitHub. Credit to the original author (he prefers to stay anonymous) who wrote the initial code — I just cleaned it up, made it maintainable, and pushed it further. It proves that HTML5 can deliver rich, interactive graphics without plugins — no Flash, no Java applets, no server-side image generation. Just JavaScript and a <canvas> tag. I think this is the future.