For a while now Chrome has supported the ability to inject colours into your console.log output. I use this to good effect when debugging my games. For some reason I decided to try and output an ANSI art style logo into the console. The concept was simple: just display a blank space and change of colour for every ‘pixel’ of the logo. After a few tests I had a nice colourful logo appearing in my console.log output.
And then an idea hit me. A really stupid idea. The sort of idea you only get at 3am after a night of coffee fuelled coding. I thought “what would happen if I could render a demo screen into the console?”. After a few hours and much experimenting later I had a result I was happy to share with the wider world.
For want of a better name I’m calling it console.logtro. You need to use Chrome as to my knowledge no other browser supports multi-coloured console output yet. The way it works is incredibly simple: The demo effects are rendered to a super tiny 50×30 pixel sized canvas. This canvas is then scanned each update and the colours are pushed into a long string based array. Once the whole canvas has been scanned I clear the console and log the new output. The end result is you get to see what would have appeared in the canvas rendered to your console.
Chrome takes a long time to clear the console, and while this is happening it appears plain white. this means that if you set a quite high refresh rate the demo flickers insanely. To my knowledge there is no way around this. You can mitigate the effect by setting the background of the demo to white.
There was absolutely no sane reason for wanting to do this of course. I just felt compelled to bring a demo screen to somewhere it had never been seen before 
and quite frankly that’s all the reason I needed.