#519 ✓ wont-fix
Steve Sims

Dynamically created elements get ignored

Reported by Steve Sims | March 31st, 2010 @ 05:14 PM | in Open tickets (closed)

If one dynamically creates a canvas element with a datasrc attribute set (after the page has been loaded) it will be ignored, i.e. they do not get automatically initialised.

Automatic initialisation of such canvas elements is currently done through an event listener attached to the DOMContentLoaded event. To support automatic initialisation of dynamically created elements an additional listener for the DOMNodeInserted event is required.

In my quick tests, simply calling the existing automatic initialisation routine on a listener for DOMNodeInserted worked, however I suspect a production-quality solution should be more careful to ensure it only initialises new canvas elements and does not re-initialise existing elements.

Comments and changes to this ticket

  • David Humphrey

    David Humphrey March 31st, 2010 @ 09:01 PM

    • State changed from “new” to “bugs”

    I'm not sure we should do this. Why not manually init a new Processing, since you're manually adding the dom elements? CC'ing a few others for thoughts as well.

  • Steve Sims

    Steve Sims April 1st, 2010 @ 06:04 AM

    I'm pretty new to Processing.js at the moment, and I ran across this bug owing to the nature of how I was trying to use it.

    I'm actually using a domain-specific MVC-based Javascript framework (not sure whether I can tell you which one without reading through the license, sorry). "Apps" using this framework have a very minimal index.html which loads in the framework, controllers, and css files, and contains a single div for displaying content. The framework (under the guidance of controllers) dynamically loads view html files as required into the display div, replacing it's contents, over the lifetime of the "app".

    So, in reality, I'm not actually programatically dynamically creating a single DOM canvas element - I have a view which contains a canvas element amongst many other things. (It could of course contain many of them.)

    I'm sure you're right that I could manually init a new Processing, however I have not yet found documentation that tells me how to use Processing.js or the Processing object; the "Reference" section of the website only documents the Processing language, which left me with examples as my guide. I assumed that if Processing.js adds support for a datasrc attribute on a canvas tag, then it adds support for a datasrc attribute...

    It seems to me that listening for DOMNodeInserted, if done correctly, shouldn't be harmful and would simplify the use of Processing.js in dynamic circumstances.

    I'm not overly familiar with these DOM events, and haven't delved into the Processing.js code very deeply yet. I suspect that Processing.js might need to keep track of the canvas elements it's handling (which it might already do), which may mean that it should also listen for DOMNodeRemovedFromDocument to help ensure it doesn't leak when canvas elements are removed from the DOM.

    On a closely related vein, it would also be sensible to listen for DOMAttrModified to check whether the datasrc has changed on a canvas.

  • notmasteryet

    notmasteryet April 3rd, 2010 @ 02:51 PM

    For now, probably the best way will be to call Processing(canvas, code) function to initialize canvas as a processing object.

    There is a pilot patch that may add some shortcut operation that may be useful during Javascript/AJAX manipulations. Started in and partially connected with #409 Standard embedding.

    The attached fix adds following methods to the Processing object/function:
    Processing.inline(scriptOrItsId) – inlines surface that runs declared HTMLScriptElement code
    Processing.importAndInline(url) – inlines surface that runs remote code
    Processing.injectIn(elementOrItsId, scriptOrItsId) – creates surface inside HTMLElement and replace its content, runs declared HTMLScriptElement code there
    Processing.importAndInjectIn(elementOrItsId, url) – creates surface inside HTMLElement and replace its content, runs remote code there
    Processing.attachTo(canvasOrItsId, scriptOrItsId) – uses HTMLCanvas as a surface and runs declared HTMLScriptElement code there
    Processing.importAndAttachTo(elementOrItsId, url) – uses HTMLCanvas as a surface and runs remote code there


      <script id="script0" type="application/processing">
       line(10, 20, 40,80);
      <div id="div1">
        Enabled JavaScript and use HTML5 compatible browser
      <script type="text/javascript">
         var div1Element = document.getElementById("div1");
         Processing.injectIn(div1Element, "script0");

    This is a preliminary work. Known issue: when a surface (e.g. ) is running by the Processing.js is removed from the document, the cleanup must be performed.

  • David Humphrey

    David Humphrey May 11th, 2010 @ 11:18 PM

    • Milestone set to 0.9.3 release date
  • sephr

    sephr May 11th, 2010 @ 11:36 PM

    Wouldn't listening for DOMNodeInserted / DOMNodeRemovedFromDocument / DOMAttrModified have a pretty large cost, even if we don't do anything with it most of the times it is called?

    I wouldn't be willing to sacrifice performance of every node I insert into my documents (especially for Ajax applications where hundreds of divs are constantly being inserted/removed. If we're going to support this, I would suggest we make it opt-in with a method like Processing.live(nodeToListenForInsertions), where nodeToListenForInsertions defaults to document.documentElement (or document if that actually works).

  • annasob

    annasob June 3rd, 2010 @ 04:23 PM

    • Milestone changed from 0.9.3 release date to 1.0 (Final)

    moving to 1.0

  • annasob

    annasob June 21st, 2010 @ 04:33 PM

    • Milestone changed from 1.0 (Final) to 0.9.6
  • annasob

    annasob July 16th, 2010 @ 06:30 PM

    • Milestone changed from 0.9.6 to 0.9.7
    • Milestone order changed from “0” to “0”
  • annasob

    annasob August 4th, 2010 @ 11:16 AM

    • Milestone changed from 0.9.7 to 0.9.8 - (1.0 Beta 1)
    • Milestone order changed from “11” to “0”
  • notmasteryet

    notmasteryet August 26th, 2010 @ 09:47 PM

    • Milestone changed from 0.9.8 - (1.0 Beta 1) to 1.1 Release Date
    • Milestone order changed from “10” to “0”
  • Daniel H

    Daniel H December 14th, 2010 @ 01:35 PM

    • Milestone changed from 1.1 Release Date to Open tickets
    • Milestone order changed from “85” to “0”
  • Pomax

    Pomax May 25th, 2011 @ 01:19 AM

    • Assigned user set to “David Humphrey”

    I'd like to close this ticket, especially with 1.2 introducing loadSketchFromSources() - any dynamically created canvas can immediately be populated by creating it as a normal canvas and instead of setting its "data-processing-sources" attribute with a string "file1.pde file2.pde ..." calling loadSketchFromSource(newCanvas, dataProcessingoSourcesString.split(" ")).

  • David Humphrey

    David Humphrey May 25th, 2011 @ 10:30 AM

    • State changed from “bugs” to “wont-fix”

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Shared Ticket Bins


Referenced by