Draw circles on mouse postion over image

Im trying to draw ofGraphics over a image a .jpg i think i have to convert the image to a texture or something similar im right? or how can i achieve this?

You can use ofImage::grabScreen

1 Like

Cool! thanks.
already draw the picture with grabscreen what im trying is to draw a circle in the mouse position every time i click the mouse i do it ofapp mousepressed but the graphics is not showing up any idea?

Are you drawing the circle within the mousePressed function? If so you should do it inside the ofApp::draw() funciton. Only whatever is inside the draw funciton will eventually be drawn.

1 Like

yeah! make sense thanks.

1 Like

How can i draw circles over a image at the mouse position?
the circles disappear i think i have to save the pic every time i draw a circle?
I can do it in the background using ofSetBackgroundAuto(false); there is something similar for the ofImage?

Correct me if i’m wrong… I understand you want to draw circles over a jpg image you have? And you want to draw the circles in the mouse position when you click? Like a Paint application?

If you want to draw continuous circles (paint-like), then you will need to draw onto an ofFbo and draw it on top of the jpg image ( comment if you need more advice on how to do this )

Maybe what you want is to show a circle when you press ( and hide it when not pressing ), then its quite simple:

    // draw image
    // if the mouse is being pressed
        // draw circle at (mouseX, mouseY)
        ofCircle(mouseX, mouseY, 100);
1 Like

yeah! exactly.
thanks i will try it.

Ok! so i place the picture inside the fbo still not working.

don’t draw the image or clear the background every frame. otherwise you’ll be drawing the image on top of what you’ve already drawn and you’ll only see the current circle

Yes i didnt write the ofClear.
But now is working but the alpha is affecting the ofCircle, i made the fbo transparent to be able to see the image but is not the best, wha can i do to make the picture visible and get a clear fbo ?


    if(drawSpot == 1){
        // draw circle at (mouseX, mouseY)
        ofSetColor(255, 0, 0);
        ofCircle(mouseX, mouseY, 3);



ofSetColor(255, 255, 255, 10);

fbo.draw(0, 0,w,h);

you can draw the image insisde the fbo but only once in setup for example or in the first draw call by using a flag.

or you can clear with alpha instead of trying to draw the whole fbo with alpha, like:


of course you need to also do that only once not every frame.