frozen frozen - 21 hours ago 2
HTML Question

Display website JS source code on HTML background with only front-end code

How can I display the current front-end JS source code (1 file) on the HTML as some sort of background? I am currently displaying a static image of my code as the background, but this must be updated manually each time the code changes, which isn't good. The JS source code is pretty short - around 50 lines.

EDIT:
My actual current site: http://imgur.com/a/gV2Vj (don't laugh, I purposely obfuscated it for fun, and all it does is make the button increment the counter).

Also, I don't need the code to be actually an image. For example, it could just be text on a div. But if I'm just displaying the text, it must not mess up the flow of the document (I need to be able to display other elements on top).

Answer

You can request local resource using XMLHttpRequest() or fetch(), use <canvas> to set words of script to canvas, call .toDataURL() on canvas, set resulting data URL as background of specific element.