title: Image not rendering on web browser
body: <p>I got a kaleidoscope code from  Gary George at openprocessing. I tried to modify it to meet my needs and export it to web. But I'm having trouble rendering the image on the browser. It runs well on the desktop but not on browser. I've been trying to fix the error but...no luck (yet, I hope).</p>
  
  <p>Here is the code:</p>
  
  <pre><code>/**
   * Kaleidoscope   by Gary George.
   * 
   *Load an image.
   *Move around the mouse to explore other parts of the image.
   *Press the up and down arrows to add slices.
   *Press s to save.
   *
   *I had wanted to do a Kaleidoscope and was inspired with the by Devon Eckstein's Hexagon Stitchery
   *and his use of Mask.  His sketch can be found at http://www.openprocessing.org/visuals/?visualID=1288
  
   */
  
  PImage a;
  int totalSlices=8;  // the number of slices the image will start with... should be divisable by 4
  int previousMouseX, previousMouseY;  //store previous mouse coordinates
  
  void setup() 
  {
      size(500,500, JAVA2D);
      background(0,0,0); 
      smooth();  //helps with gaps inbetween slices
      fill(255);
      frameRate(30);
      a=loadImage("pattern.jpg");
  }
  
  void draw() {
    if(totalSlices==0){ 
      background(0,0,0);  
      image(a,0,0);
    }
    else{
     if(mouseButton == LEFT){
        background(0,0,0);  
        //the width and height parameters for the mask
        int w =int(width/3.2); 
        int h = int(height/3.2); 
          //create a mask of a slice of the original image.
        PGraphics selection_mask; 
        selection_mask = createGraphics(w, h, JAVA2D); 
        selection_mask.beginDraw(); 
        selection_mask.smooth();
        selection_mask.arc(0,0, 2*w, 2*h, 0, radians(360/totalSlices+.1));   //using 369 to reduce lines on arc edges
        selection_mask.endDraw(); 
        float wRatio = float(a.width-w)/float(width);
        float hRatio = float(a.height-h)/float(height);
        //println("ratio: "+hRatio+"x"+wRatio);
        PImage slice = createImage(w, h, RGB); 
        slice = a.get(int((mouseX)*wRatio), int((mouseY)*hRatio), w, h);  
        slice.mask(selection_mask); 
        translate(width/2,height/2); 
        float scaleAmt =1.5;
        scale(scaleAmt);
        for(int k = 0; k&lt;=totalSlices ;k++){ 
          rotate(k*radians(360/(totalSlices/2))); 
          image(slice, 0, 0); 
          scale(-1.0, 1.0);
          image(slice,0,0);
        }
     }
     resetMatrix();
    }
  }
  </code></pre>