I have the following simple html:

```
<h1><i>This is a test</i> <span class="wysiwyg-color-red">Hello world</span></h1>

```

I would like to create a text html to canvas converter using a set of basic styles and **strokeText** html5 canvas api method.

It would be useful to get a 'tree' of node values and the list of html html elements.

```
{ 
  "This is a test": ["i", "h1"],
  "Hello world": ["span class="wysiwyg-color-red", "h1"]
} 

```

From that I would be able to generate appropriate canvas text styles.

**Answer:**

<http://jsfiddle.net/AUTJs/4/>