How to reset the background of a Graphic completely (every pixel should be 100% transparent)?

Hi everyone! I need to clear a graphic (createGraphics) in p5, what should i use?

if i use background(0), the graphic will be cleared, however the pixels will be still black, and thats not good beacuase i am using multiple graphics and their background has to be transparent

i tried using clear() but it looks like its not working on a graphic in p5 only in processing :(

any help would be appreciate!


  • This is my attempt. I think it is easier using an image object. There could be a better way? I let forum goers provide feedback. Relevant code in generatePG().


    var img;
    var pg;
    var showOff;
    function preload() {
      img = loadImage("/static/uploaded_resources/p.23038/figSmall.jpg");
    function setup() {
      createCanvas(400, 400);
    function draw() {
      image(img, 0, 0, 400, 400);
      var d = pixelDensity();
      var halfImage = 4 * (img.width * d) *(img.height/2 * d);
      for (var i = 0; i < halfImage; i++) {
        pixels[i+halfImage] = 0x0;//pixels[i];
      text("Below "+showOff, width/2, height*0.85);
    function mousePressed() {
    function generatePG(show) {
      let val=0;
      if (show)
      pg = createGraphics(200, 200);
      pg.background(0, val);
      pg.fill(255, val);
      pg.ellipse(pg.width/2, pg.height/2, 50, 50);
      image(pg, 50, 50);
  • Use pg.clear(); pg.background(0,0);

Sign In or Register to comment.