title: Paper.js Loading Images and the Active Layer
body: <p>I'm using Paper.js to make an image editor that handles a queue of images. These images come from PDFs that are uploaded to a server and converted to images. As per the suggestions in this <a href="https://stackoverflow.com/questions/33682575/paper-js-background-rasterization-glitches">question</a>, I'm loading each image into its own layer.</p>
  
  <pre><code>// Load images of pdf, each into its own layer
  var loadPdf = function(pdfAsImages) {
    toolsSetup();
  
    // Loop through images for pdf
    pdfToLayerMap[pdfAsImages.id] = [];
    for(var i = 0; i &lt; pdfAsImages.images.length; i++) {
      var layerForImage = new paper.Layer();
      layerForImage.visible = false;
      pdfToLayerMap[pdfAsImages.id][i] = {
        layerIndex: paper.project.activeLayer.index,
        imageHeight: pdfAsImages.images[i].height
      };
  
      var imageDataUrl = 'data:image/png;base64,' + pdfAsImages.images[i].imageData;
      var raster = new paper.Raster(imageDataUrl, new paper.Point(canvas.width / 2, canvas.height / 2));
      layerForImage.addChild(raster);
  
      selectedItemsByLayer[layerForImage.index] = new paper.Group();
  
      registerLayerEvents(layerForImage);
    }
  };
  
  var setActive = function(pdfIndex, imageIndex) {
    var imageHeight =  pdfToLayerMap[pdfIndex][imageIndex].imageHeight;
    paper.project.activeLayer.visible = false;
    var layerToActivate = pdfToLayerMap[pdfIndex][imageIndex].layerIndex;
    paper.project.layers[layerToActivate].activate();
    paper.project.layers[layerToActivate].visible = true;
    fitToPage(imageHeight);
  };
  </code></pre>
  
  <p><code>loadPdf</code> is called each time we receive an image from the server. This adds a new layer for each image of each page in the pdf. The trouble is that when a new layer is created it is set as the active layer. So while images are loading from the server, we want to be able to perform edits on images already loaded. But as images loaded, the active layer gets out of sync with whatever already loaded image we're currently editing. So if I try to add text, for example, it will add it to the wrong image because it will add it to the active layer, which is the wrong layer. Somehow we need to keep the active layer the layer with the image that we're currently editing. (Could this be done with a separate Paper context?)</p>
  
  <p>Since we don't know the number of images beforehand (we know the number of PDFs, but not how many pages each has), we can't do something like this, initializing all the layers beforehand:</p>
  
  <pre><code>var initializeLayers = function(numberOfLayers) {
    for(var i = 0; i &lt; numberOfLayers; i++) {
      var layerForImage = new paper.Layer();
      layerForImage.visible = false;
      selectedItemsByLayer[i] = new paper.Group();
    }
  
    paper.project.layers[0].activate();
  };
  </code></pre>
  
  <p>So is there a way I can prevent Paper.js from setting a new layer to active upon creation? Or is there another way around this?</p>