saveCanvas() is being called over and over, crashes fiefox.


I am attempting to utilize the saveCanvas() function to save the canvas as an image (duh).

function mouseClicked(){ saveCanvas(myCanvas, 'someImage', 'png'); }

However, when I click the mouse, the function seems to be called over and over again, flooding the window with dialogue boxes.

Please let me know if I am using this function wrong.



  • edited November 2015

    I believe it's more stable to do that inside draw().
    Just set apart some boolean variable in order to flag it's time to saveCanvas():

    // savecanvas-is-being-called-over-and-over-crashes-fiefox
    // GoToLoop (2015-Nov-03)
    var saveRequest;
    function draw() {
      if (saveRequest) {
        saveCanvas('img-' + nf(frameCount, 4), 'png');
        saveRequest = false;
    function mouseClicked() {
      saveRequest = true;
  • @GoToLoop's workaround works - and suggests there's some kind of event handling conflict in saveCanvas(). You should report a bug

  • edited November 2015

    I don't think it's a bug but rather an annoying glitch. :-\"
    AFAIK, saveCanvas() is modal. That is, it pops up a blocking window save dialog in the browser.
    However, we end up clicking the mouse while dealing w/ that. Thus more MouseEvents occur! #-o

  • Thanks guys,

    I'm an experienced C programmer, but still figuring out how the processing functions interact with each other.

  • edited November 2015
    • I know some times it's not as intuitive as we all would like to.
    • If we have saveCanvas() inside any Event, it's gonna request a new save modal window for as many times that it had triggered. Even if we're already busy w/ 1 or more!
    • However, just flagging the Event as true, and postponing it to draw() to deal w/ it, we assure ourselves that only 1 happens for each draw() callback and the rest is discarded. *-:)
  • edited November 2015
    • On 2nd thought after further experiments, perhaps @blindfish was correct there's some bug there.
    • It seems to trigger "infinite" saveCanvas() even though I had made sure I've just clicked once! ~:>
  • @RobotProcess: Try it with mousePressed

    That appears to work fine; though I'm slightly surprised there's such a big difference in behaviour...

    @GoToLoop: the bug appears to be in mouseClicked. The documentation is a little too vague but at first glance the behaviour suggests that mouseClicked is firing events for as long as the mouse button is down; rather than waiting till the mouseDown/Up cycle is complete and then firing a single event :/

  • No - that's not it:

    var count1 = 0,
          count2 = 0;
    function setup() {
        createCanvas(600, 400); 
    function draw() {
    function mouseClicked() {
        console.log("count1: " + count1);  
    function mousePressed() {
        console.log("count2: " + count2);  

    There must be some problematic interaction between saveCanvas and mouseClicked. Don't have time to dig any deeper right now..

Sign In or Register to comment.