title: Make PGraphic Object the cursor
body: <p>This is a follow-up of my question: <a href="https://stackoverflow.com/questions/52322112/make-the-cursor-a-self-drawn-image">Make the cursor a self-drawn image</a>.</p>
  <p>I have a paint a picture application. The latest working version can be found here: <a href="https://knowledgeablekangaroo.github.io/paint-a-picture-backup/" rel="nofollow noreferrer">https://knowledgeablekangaroo.github.io/paint-a-picture-backup/</a>, where the code can be found in <em>F12 &gt; Sources &gt; paint-a-picture.js</em>.</p>
  <p>The user can choose a color, set the background, set the thickness, shape, and opacity. There is also an eraser functionality. I want there to be a better user experience, <strong>so I am trying to draw the eraser below as the cursor</strong>. If the cursor doesn't work, I need something that doesn't smear.</p>
  <p>The way I have programmed it, anywhere inside the &quot;paint area&quot; (above control center and below pallete) will smear - the <code>background()</code> is outside the draw.</p>
  <pre><code>var pg = createGraphics(pgDimensions.w, pgDimensions.h, JAVA2D);
  pg.beginDraw();
  pg.fill(255, 200, 255);
  pg.strokeWeight(2);
  pg.rect(0, 0, pgDimensions.w, pgDimensions.h);
  pg.fill(0);
  pg.textAlign(CENTER, CENTER);
  pg.text(&quot;ERASER&quot;, pgDimensions.w / 2, pgDimensions.h / 2);
  pg.endDraw();
  </code></pre>
  <p>I used the <code>createGraphics()</code> function to create a PGraphics Object. The point is to show the eraser while This shows the eraser I have drawn in the pGraphic above.</p>
  <p>In the <code>drawBrush()</code> function, I make this an image. <a href="https://i.stack.imgur.com/sG4Hg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sG4Hg.png" alt="Eraser" /></a></p>
  <pre><code>    var drawBrush = function() {
      fill(currentColor);
      noStroke();
      shapes.forEach(function (element, index) {
          if (pshape == index) {
            element.brush();
          }
      });
      if (C === bgColor) {
          image(pg, mouseX - pgDimensions.w / 2, mouseY - pgDimensions.h / 2);
      }
  };
  </code></pre>
  <h2>Research</h2>
  <p><a href="https://forum.processing.org/two/discussion/20395/how-to-make-a-brush-object-that-follows-the-mouse-with-size-and-color-parameters" rel="nofollow noreferrer">This best describes my problem</a></p>