Add javascript code to index.html template so that the canvas is focused as the page is loaded

[teo1978]

keyPressed() and keyReleased() are not triggered unless the canvas is focused, which usually means that they won't work until you click on it. That's because processing.js attaches the listeners to the canvas object.

From a "standard sketch page" such as that generated by JavaScript mode, one expects the sketch to behave as similarly as possible to a sketch in Processing. So, when you load the page, one expects the keystrokes to trigger the keyPressed() and keyReleased() events from the beginning as it would happen when you run a sketch from Processing's IDE.

That can be accomplished easily by adding few lines of javascript to the html template, so that the canvas containing the sketch is focused on page load.

Processing.js's author gives a couple of pretty good reasons for not doing this from PJS itself: (1) there may be more than one sketch in a page, and (2) a sketch may not be the main thing on the page. However, neither of these apply to the page generated by JavaScript Mode, which is intended to be as similar an experience as possible to a sketch run from the Processing IDE.

[fjenett]

+1