Painting the DOM to Canvas with Domvas

Domvas is a tool that uses what amounts to a backdoor via SVG to allow you to turn DOM elements into images that can be painted onto a Canvas.

Why would you want to do this? Well, taking advantage of all the neat CSS3 effects for HUD elements for a start.

How does it work? Creator Paul Bakaus explains: “Domvas uses a feature of SVG that allows you to embed XHTML content into the SVG – and as you might know, the actual SVG can be used as a data uri, and therefore behaves like a standard image.”

The code does not work on IE.

Check out the project home page or the code on Github


You might also find this interesting:


  1. Ejecta: A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS Ejecta is a open-source native wrapper for iOS that has custom hardware-accelerated Canvas and native audio implementations for porting your HTML5 games into the apple App store. Released by Dominic...

  2. Tron: a Canvas game in 219 bytes Alok Menghrajani has a fantastic write-up on how he and some coworkers were able to build a fully-functioning HTML5 game using canvas in 219 bytes, including all the page HTML....

  3. HTML5 Canvas Cheat Sheet DZone has a nice Downloadable, PDF Cheat Sheet for HTML5 Canvas that covers the Canvas Element in depth, going over the basics of when using the element is appropriate and...

  4. Abacus.js: All the game-dev-bootstrapping related stuff you wish you had A new project coming out of Bocoup aims to provide HTML5 Game Devs with a set of tools that allows them to focus on making games and not worry about...

  5. Cannon.js: 3D JavaScript Physics written from scratch Cannon.js is a nice-looking, simple 3D physics engine for the web, inspired by three.js and ammo.js, but written from scratch in JavaScript and using an iterative Gauss-Seidel solver to solve...

HTML5 Tools