title: Hide and show background image when keyboard pressed, preserving overlay elements
body: <p>I would like to paint ellipses over an image when clicking the mouse, and when I press the keyboard, hide and show the underneath image alternatively, without cleaning the ellipses.</p>
  <p>I'm using createGraphics() to store the image data, and remove() so when the keyboard is pressed I spect the image disappear but it doesn't work</p>
  <p>Here is a sketch of what I trying to do:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let isMouseBeeingPressed = false;
  let img;
  let isShow = true
  let bufferImg;
  
  function preload() {
    img = loadImage(
      "https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500"
    );
  }
  
  function setup() {
    createCanvas(500, 500);
    background(255);
    loadImageBuffer();
  
  }
  
  function loadImageBuffer() {
    bufferImg = createGraphics(400, 400);
    bufferImg.image(img, 0, 0);
    image(bufferImg, 0, 0);
  
  }
  
  
  function draw() {
      if(isMouseBeeingPressed) {
        stroke(0, 0, 0, 50);
        fill(255);
        ellipse(mouseX, mouseY, 20);
      }
  }
  
  function keyPressed() {
    
    if(isShow) {
      bufferImg.remove();
    } else {
      image(bufferImg, 0, 0);
    }
    
     
    console.log('isShow:', isShow);
    return isShow = !isShow;
  }
  
  function mousePressed() {
    isMouseBeeingPressed = true;
  }
  
  function mouseReleased() {
    isMouseBeeingPressed = false;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any idea of how to achieve this?</p>