I had that very same idea, but personally think it would be far harder to do a JavaScript VM written in pure PHP than it is to do it this way around.

It has no real practical use, but it was an amazing learning experience for me. So many puzzles to solve

I can think of a couple of practical uses, the biggest one that comes to mind is helping places like CodeSchool do in browser PHP tutorials with the code actually executing. So definite practical uses :)

This an very valid reason. The other one could be user-frontend editing of wordpress widgets or similar little nasty diy codebits.

Great use case, might I add.

As someone whose initial reaction was "God why?" I stand corrected--that's an excellent use for this project.

Must admit I had the same reaction and then it clicked and was much more impressive.

Assuming you have strong convictions about using php instead of JavaScript, it could be very useful.

I'm actually using a similar tool (js_of_ocaml [1]) at work. It's great: we can take our product and package it for node or let people use it in the browser directly. And we can also have a native compiled version if performance is needed.

[1]: http://ocsigen.org/js_of_ocaml/

So if you have an almost religiously php-oriented shop working on something that isn't a web app, I could certainly see this being useful. That's exactly what the company I'm at is, except with OCaml instead of php. Of course, I can't actually imagine any company like that in php :P. (How many people use php for something that isn't server-side code?)

But the core idea is useful and awesome. And it's certainly very cool for a personal side-project!

Out of curiosity and if you don't mind me asking, what is the OCaml-shop company you're at? Are you based out of France?

It's a really tiny startup in the Bay Area.

Actually, I stumbled on an article recently noting that you can use the V8 pecl extension for running computationally-heavy code as JS from within PHP, rather than PHP code itself, to shave off some cycles.

A tool like this, with enough support, could allow you to easily convert large chunks of slower, PHP code (like object graph hydration) into JS, run in V8 for speed, and use the result in PHP without manually converting libraries.

One could have a chunk of php code that needs to be run client side (for whatever reason, offline access on a chromebook being one).

PHP.js could come in handy (no need for porting the whole thing to js). Especially if this code will change over time.

You're spot on. People asking 'why' or 'how is this useful?' are missing the point.

you should waste your time solving more useful puzzles. Head into Machine Learning for example, or if you are into VMs, why not try creating a Java VM on top of Cocoa for Android developers to invade iOS, that'll have more impact and you will have to learn some serious compiler theory.

There is no physics implemented on the z-axis yet.

You can't

The loading time could be significantly lowered if the files would be converted into a more accessible format for JavaScript. Especially the sprites/textures, if they would pre-processed into PNG's or something more understandable by javascript, the loading time could already be dropped by a second or two.

What kind of graphics card you got?

Integrated Intel HD Graphics 3000 512 MB (note that your demo does work here with the latest Firefox Aurora)

There are 3 cars, none of them stealable though :(

There is no additional code in the script which is there to just support FF down to 3.6, the reason the script isn't supported on older FF versions is due to lack of key methods missing/or partial support (i.e. getBoundingClientRect, canvas etc.). Nor is there any functionality in the script that the support for FF 3.6 is holding back.

Yep, didn't think the proxy would be getting +100k requests within 24 hours. Guess we need to wait for tomorrow :(

Mind telling us how the proxy works or putting up some source code(couldn't find the proxy source on github)? I am also lazy and didn't read the whole script source, i bet it could be recreated with some effort. uft :D

I'll put python/java/php sources up once I got the specs for the proxy more set (currently still could get some changes that could break the whole functionality), but in short it provides the images either base64 encoded jsonp if browser doesn't support XHR2, if it does, it provides it as an image with CORS enabled (prefered as it is slightly smaller than base64 encoded).

For the HTML, it just checks a simple charset check and does the same as for images.

There are plenty of examples of the script embedded on the page though, and you can always download a copy from github and try it on your own page meanwhile.

copy of the proxy source available at https://github.com/niklasvh/html2canvas-proxy now

Officially watching it :D

I'm working on a browsers addon to help with remote support, mostly my mom. Thought about VNC or the like, but that's a bit of an over kill when I can just run JS in the browser.

This works great in letting me see wth she is talking about when some website is broken. This is my play ground for it, bragcollege.com. If you want to log in and play around let me know.

Looking at the supported browsers on http://www.google.com/tools/feedback/intl/en/index.html and some of the clearer bugs in their screenshots (enlarge the picture, check out for example text-underlining and compare with FF/Chrome), combined with what ElliottZ mentioned in this Twitter message https://twitter.com/#!/ElliottZ/status/89520809147772929, I could with quite high certainty say that they have a very similar approach to doing this. Having worked with this for some time already, I can see why they for example have not supported Opera, although the problem (presumably the reason they don't) can easily be fixed with wrapping text in temporary nodes for example. One major advantage they have, which works for their favor is that they use the script on pages they control, where as my approach is trying to get this working on any page, regardless of who created it with as bad CSS/HTML as they did. If you aren't gonna be using z-index positioning, no letter-spacing, no CSS3 properties, no HTML5 form elements etc. it can be very easy to make matching screenshot to the page.

For IE<9 the Flash option won't have to be the only option either, a server could be rendering the elements gathered from the users browser (in other words a canvas proxy for the canvas renderer).

In terms of my script, the aim is to try and get the compatibility down to FF3, IE6 (with non-canvas support through flashcanvas or server canvas), Opera (haven't looked much yet how old version would be able to support it), and Chrome.