Question

There is a site with a neat canvas program that I’d like to play with. I’m new to canvas and html, but I think it works by having the canvas element programmed separately and called by a tag in the html. I have three questions:

Can I download and isolate the canvas element?

Is there a way to view the canvas source from a browser?

If a decompiler is necessary, is there one that will work for java script and other elements too?

Answer 1

Canvas is an HTML element that is made useful by writing procedural JavaScript to produce figures, animations, effects and so on.

You can view the source code – that is, the JavaScript – by opening developer tools in your browser (typically F12) and exploring the .js files.

Here’s an isolated page with a very small canvas application that you can view the source for:

http://simonsarris.com/project/canvasdemo/shapes.html

There is also a tutorial explaining all of the source that is linked to from that page.

Opening the Google Chrome devloper tools with F12 we can see:

There’s one JavaScript file called shapes.js and it houses all of the code that makes up the canvas app.

---

Isolating a canvas is another problem entirely. Let’s have a look at this page from the New York Times:

http://www.nytimes.com/interactive/2012/06/11/sports/basketball/nba-shot-analysis.html

If you open developer tools here you’ll realize that there is an enormous amount of JavaScript running, much of it obfuscated, and its very hard to determine by eyeballing just what code is driving the canvases that make up their neat graphic.

We can do something though. We can go to the “Elements” page of the Developer tools and search for the appropriate <canvas> tag there. Once we have it, we can look at its properties such as the id (<canvas id="SearchForMe"></canvas>).

Then in developer tools we can go back to the Scripts page and press CTRL+SHIFT+F to search across files, and we’ll be able to search for the ID of the canvas or some other unique marker. (sometimes we need to search for the div that holds the canvas instead)

There’s another tool that will help here. Look at my screenshot, at the very bottom is a button that looks like { }. This attempts to turn obfuscated code into pretty print for much greater human readability. It will often help you parse the code you’re looking at.

Anyway, hope that helps.