Command Console in your browser via HTML5 Canvas & JavaScript - raddevus 28 Apr 2016

Introduction Update Note 2016-04-28: I fixed the problem with handling the backspace and enter keys. For some time it was only FireFox which didn't work, but then Chrome stopped working also. It's all fixed now. You can see the code change in the last code sample.

I have been learning about the power of the HTML5 Canvas element and what you can do. I wanted to see if I could duplicate the command-line console in the browser which I could later use for fun and pranks. Here is how I did it.

In the image below, I've taken a snapshot of my Console in the Browser (it's the one in the back) which includes a snapshot of a real Console window (for comparison). I was able to capture the image showing both cursors even though the cursors blink -- to show users the console window is ready for input. My version blinks the cursor also.

See Live Demo You can see it live in your browser at: http://raddev.us/console/console.htm (opens in new tab/window)

Original Source https://www.codeproject.com/Articles/1066735/Command-Console-in-your-browser-via-HTML-Canvas-J