title: In PlayN, how do I create a transparent CanvasImage?
body: <p>I wrote a simple example that I expected would do it. The relevant code is pasted below, complete source available <a href="http://code.google.com/p/klenwell/source/browse/trunk/projects/java/playndev/playndev/core/src/main/java/com/googlecode/klenwell/playndev/core/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>First, the method of my game class that draws three circles as canvas images using the <code>asCanvasImage</code> method on my <code>Circle</code> class:</p>
  
  <pre><code>public void drawThreeTransparentCircles() {
      // create an immediate layer and add to root layer
      ImmediateLayer circleLayer = graphics().createImmediateLayer(
              new ImmediateLayer.Renderer() {
                  public void render(Surface surf) {
                      Circle redCircle = new Circle(-25, 0, 50, Color.rgb(
                              255, 0, 0), 0.5f);
                      Circle whiteCircle = new Circle(0, 0, 50, Color.rgb(
                              255, 255, 255), 0.5f);
                      Circle blueCircle = new Circle(25, 0, 50, Color.rgb(0,
                              0, 255), 0.5f);
                      surf.drawImage(redCircle.asCanvasImage(),
                              redCircle.getScreenX(), redCircle.getScreenY());
                      surf.drawImage(whiteCircle.asCanvasImage(),
                              whiteCircle.getScreenX(),
                              whiteCircle.getScreenY());
                      surf.drawImage(blueCircle.asCanvasImage(),
                              blueCircle.getScreenX(),
                              blueCircle.getScreenY());
                  }
              });
  
      rootLayer.add(circleLayer);
  }
  </code></pre>
  
  <p>And then <code>asCanvasImage</code> method of my <code>Circle</code> class:</p>
  
  <pre><code>public CanvasImage asCanvasImage() {
      int diameter = radius * 2;
      CanvasImage circleImage = graphics().createImage(diameter, diameter);
      Canvas canvas = circleImage.canvas();
      canvas.setFillColor(color);
      canvas.fillCircle((float) radius, (float) radius, (float) radius);
      canvas.setAlpha(alpha);
      return circleImage;
  }
  </code></pre>
  
  <p>The alpha value is set to 0.5 for each circle. But this is the result when I run the Java version:</p>
  
  <p><img src="https://i.stack.imgur.com/bXFLh.jpg" alt="enter image description here"></p>
  
  <p><strong>Edit:</strong> I discovered that if I change the alpha value on the rootLayer, it makes the images transparent:</p>
  
  <pre><code>rootLayer.setAlpha(0.5f);
  </code></pre>
  
  <p>However I wish to make each of the circle images independently transparent with different alpha values. Does that mean I have to add each image to its own layer and set the transparency on that layer?</p>