Processing.js - Drawing onto an Image

Question

Using the HTML5 Canvas element and Processing.js, I want to draw circle outlines onto an image. However, when I run my code, the area inside the circle outlines simply turns white, instead of retaining the image information in that region. I suspect that this is an image loading problem, but I've included the comment:

/* @pjs preload="myImage.jpg"; */

that I've read will fix that. My entire .pde file is below:

/* @pjs preload="myImage.jpg"; */

// Global Variables
PImage img;

// Data Storage
ArrayList cent_x;
ArrayList cent_y; 
ArrayList cent_r;

void setup() {
    // Establish Canvas
    size(760,560);

    // Load Image
    img = loadImage("myImage.jpg");

    // Initialize Data Structures
    cent_x = new ArrayList();
    cent_y = new ArrayList();
    cent_r = new ArrayList();
}

void draw() {
    // Draw Background Image
    image(img,0,0,width,height);    

    // Add to Data Structures
    if (mousePressed) {
        cent_x.add(mouseX);
        cent_y.add(mouseY);
        cent_r.add(15);     
    }

    // Draw all Marks
    for (int i = 0; i<cent_x.size(); i++) {
        int c_x = cent_x.get(i);
        int c_y = cent_y.get(i);
        int c_r = cent_r.get(i);

        stroke(255,255,0);
        ellipse(c_x,c_y,c_r,c_r);
    }
}

Any thoughts on why that may be happening?

Answer 1

You need to call noFill(); before calling ellipse(). That should do it