title: How to clear part of the buffered image with p5.js
body: <p>I am using javascript with p5.js framework. I created an offscreen graphics buffer. Now I want to clear part of that buffer (so it becomes invisible again). What is the best way to do it?</p>
  
  <p>Right now I can only achieve that by direct changing of the alpha value for every pixel I need.</p>
  
  <p>Here is a MCVE:</p>
  
  <pre class="lang-js prettyprint-override"><code>// sketch.js, requires p5.js
  
  function setup() {
    createCanvas(100,100);
    background(0);
    let mymap = createGraphics(100,100);
    mymap.fill(255);
    mymap.rect(20,20,40,40);
    mymap.loadPixels();
    for (let i = 23; i &lt; 37; i++) {
      for (let j = 23; j &lt; 37; j++) {
        mymap.pixels[400*i+4*j+3] = 0;
      }
    }
    mymap.updatePixels();
    image(mymap,0,0);
  }
  </code></pre>
  
  <p>Some side-notes:</p>
  
  <p>1) there is a <a href="https://github.com/linux-man/p5.tiledmap" rel="nofollow noreferrer">tiledmap.js</a> library to p5.js, but I am still reading into it's source code and right now it doesn't look like they got 1 buffer for the entire tilemap.</p>
  
  <p>2) there is a <a href="https://p5js.org/reference/#/p5/clear" rel="nofollow noreferrer">clear function</a> to clear the canvas graphics, it does clear things, but it clears everything on the given buffer.</p>