inicio mail me! sindicaci;ón

A Browser within a Browser: HtmlCanvas

It’s been a while since my last truly silly project, so i thought i’d come up with something else.

There has been a lot of talk recently about how the web is essentially replacing desktop applications, which to me sounds great.

But there is something missing from this new age of web applications. In order to run web apps you need a web browser, which is still a desktop app. It seems to me odd that a platform which replaces another still requires that platform to operate.

Which is where htmlcanvas comes in. It’s a HTML renderer implemented in JavaScript, which runs nicely in any capable web browser which supports the Canvas element.

htmlcanvas in action

In essence, it’s a web browser implemented within a web browser. The above example was rendered from this HTML:


<html>
<head>
  <title></title>
</head>
<body><!-- Begin test -->
  <p class="woo" id="render">
Rendering <b>HTML</b>...</p>
  <p><span>In <b>Canvas</b></span>!</p>
  <p>0_0</p>
</body>
</html>

This sort of recursive abstraction is not uncommon in the computing world. For example, C compilers are written in C, Pascal compilers are written in Pascal. There’s even a version of Python implemented within Python. So a web platform implemented within a web platform is quite natural.

Still, it will be a long while before htmlcanvas is remotely capable of running within itself, so a truly recursive web browsing experience is still a long way off.

As with most of my silly projects, the code to htmlcanvas is hosted on github. Fork it here!

Note: Currently only known to work in Safari 4, FireFox 3.5, or Google Chrome.

  • dobby2
    I was wondering if you could use it to morph a piece of html into an other piece of html. Example: You have a form, fill it in and when pressing next you morph the current form into the next form. The fill in would be done in regular browser, you could then render the result and the next form in canvas and morph between them. When the morph is done you remove the canvas and show the next form.

    In short you could use it for pixel based animations between html elements.

    Would it be possible?

    Side note: It would be nice if browsers that support canvas supported the ability to export a region or html element to a canvas or data url. This way you could thake screenshots of parts of a page manipulate the pixels within it and overlay the manipulated image on top of the actual html.
  • James Urquhart
    Possible in the far future, sure - but seems a bit of overkill for a potentially annoying effect. ;)
blog comments powered by Disqus