Inconsistant download of image

OhNoFlowNo

Hi,

I'm calculating the mandelbrot set and would like to download i high resolution image. This is done by calculating a large image (the global img variable), assigning it to the downloadImage variable for storage and issuing a download. All this is working as intended, however the download doesn't always work. Especially when I try to render a large image with 5000 pixels in width the download sometimes does not start. Chrome recognizes that a download has been issued and shows the green wave like animation on the menu bar but the download window never appears. Since the download sometimes works fine and sometimes not, I have not been able to locate the problem so far.

Any imput is appreciated as I am stuck.

EDIT: The download happens in the function downloadImage()

var ratio;
var mapSize;
var centerX;
var centerY;
var renderSpeed = 20;
var currentLine = 0;
var img;
var downloadImage;
var calcTime;
var downloadButton;

function setup() {

  mapSize = 2;
  centerX = -1;
  centerY = 0;

  setupCanvas();

  downloadButton = createButton('Download');
  downloadButton.position(5, 85);
  downloadButton.mousePressed(downloadImage);

  noLoop();
}

function setupCanvas()
{
  resizeCanvas(window.innerWidth, window.innerHeight);
  ratio = window.innerWidth / window.innerHeight;
  pixelDensity(1); // Enables fine rendering for HDPI screens
  loadPixels(); // Enables pixels[]
  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateText();
}

function windowResized() {
  setupCanvas();
}

function downloadImage()
{
  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateMandelbrotSet(5000, 5000 / ratio, false);
  downloadImage = img;
  //downloadImage.save('Mandelbrot','png');  
  updateText();

  var mimeType = 'image/png';
  var downloadMime = 'image/octet-stream';
  var imageData = downloadImage.canvas.toDataURL(mimeType);
  var extension = 'png';
  var filename = 'Mandelbrot';
  imageData = imageData.replace(mimeType, downloadMime);

  //Make the browser download the file
  p5.prototype.downloadFile(imageData, filename, extension);

}

function updateText() {fill(255, 255, 255, 255);
  text('Calculation time: ' + calcTime + ' ms', 5, 15);
  text('CenterX: ' + centerX, 5, 35);
  text('CenterY: ' + centerY, 5, 55);
  text('Size: ' + mapSize, 5, 75);
}

function updateMandelbrotSet(xWidth, yWidth, update) {
  var start = millis();
  img = createImage(xWidth, yWidth);
  img.loadPixels();
  for (var x = 0; x < xWidth; x++) {
    for (var y = 0; y < yWidth; y++) {

      var reOrg = map(x, 0, xWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
      var imOrg = map(y, 0, yWidth, centerY - mapSize, centerY + mapSize)
      var re = reOrg;
      var im = imOrg

      var nMax = 99; // Iteration count (precision)
      var n = 0;
      var z = 0;

      while (n < nMax) {
        var reNew = re * re - im * im;
        var imNew = 2 * re * im;
        re = reNew + reOrg;
        im = imNew + imOrg;

        if (re * re + im * im > 4)
        {
          break;
        }

        n++;
      }

      var pix = (x + y * xWidth) * 4;
      if (n == nMax) {
        img.pixels[pix + 0] = 0;
        img.pixels[pix + 1] = 0;
        img.pixels[pix + 2] = 0;
        img.pixels[pix + 3] = 255;
      } else {
        img.pixels[pix + 0] = ((n - 33)/33) * 255;
        img.pixels[pix + 1] = ((n - 66)/33) * 255;
        img.pixels[pix + 2] = ((n - 0)/33) * 255;
        img.pixels[pix + 3] = 255;
      }
    }
  }
  img.updatePixels();

  if (update)
  {
    image(img, 0, 0);
  }

  var end = millis();
  calcTime = end - start;
  console.log("This took: " + calcTime + "ms.")
}

function mouseWheel(event) {
  if (event.delta < 0) {
    if (mapSize > 5e-16) {
      x = map(mouseX, 0, window.innerWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
      centerX = centerX + (x - centerX) * 0.3;
      y = map(mouseY, 0, window.innerHeight, centerY - mapSize, centerY + mapSize)
      centerY = centerY + (y - centerY) * 0.3;
      mapSize = mapSize * 0.7; 
    }
  } else {
    x = map(mouseX, 0, window.innerWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
    centerX = centerX - (x - centerX) * 0.3;
    y = map(mouseY, 0, window.innerHeight, centerY - mapSize, centerY + mapSize)
    centerY = centerY - (y - centerY) * 0.3;
    mapSize = mapSize / 0.7; 
  }

  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateText();
}