1

I am working on a ProcessingJS visualization, and I have been noticing that the performance degrades noticeably when a user selects the canvas element.

Unfortunately, I only have it working locally, so I can't send a link to the actual page, but here is a 10 second screen cast of the behavior.

When the page loads, and the canvas is not selected, the sketch seems to render at a reasonable pace. If I click the black background of the canvas element, however, the sketch starts drawing noticeably slower. Clicking somewhere else, like outside the browser, or in the url bar to take the focus off of the canvas element improves the performance back to where it was on page load.

so 2 questions:

1) Why is this happening?

2) Is there a way to prevent this? I imagine by preventing the user from focusing the canvas element at all, but open to any suggestions.

I have tried these responses, question1, question2 in regards to disabling user selection of the canvas, but didn't have any luck.

Thank you!

Community
  • 1
  • 1
goggin13
  • 7,876
  • 7
  • 29
  • 44

2 Answers2

1

After wasting some of the ProcessingJS's team's valuable time, which you can follow under the linked ticket, they discovered the error was with my HTML file.

I had been lazy when putting together the HTML file, and left out the header element, so it had looked just like this:

<script src="processing.js"></script>
<canvas id="graph_canvas" data-processing-sources="Main.pde ....">
</canvas>

Which, as the ProcessingJS team pointed out, is not actually a valid HTML file (at all), as it lacks <head><body> etc... elements.

For whatever reason, having an improperly formatted HTML file was causing the behavior show in the screen shots above. As soon as I added in all the normal required elements, the performance was fine across browsers, with the canvas focused or unfocused.

goggin13
  • 7,876
  • 7
  • 29
  • 44
  • 1
    Using the W3C Markup Validation Service might help others find and fix problems with their HTML to avoid this problem: http://validator.w3.org/ – Jason Sundram Dec 24 '11 at 06:33
0

This is interesting, and worthy of filing a bug with us (processing.js). Can you do that, and/or find us on irc.mozilla.org/processing.js? We should figure out why this is happening.

David Humphrey
  • 1
  • I posted this ticket, https://processing-js.lighthouseapp.com/projects/41284-processingjs/tickets/1316-focusing-on-the-canvas-element-degrades-performance, on the PJS lighthouse account. I will check back there if I can provide any further information. Thanks for the response! – goggin13 Jun 01 '11 at 03:24