title: ReactJS and Konva free drawing with pencil, brush and eraser
body: <p>I want to create a simple app where I can choose between pencil, brush and eraser. I have Home.js and addLine.js. But there is a bug which I cant fix. When I change from brush back to pencil I'am drawing with the pencil but there is something like a border surrounding the pencil drawing which takes the color I previously used for the brush. <a href="https://i.stack.imgur.com/eh0O6.png" rel="nofollow noreferrer">Sample bug pucture</a> If it matters I used react color for color picking.</p>
  <pre><code>const Home = () =&gt; {
   
    
    const stageEl = React.createRef();
    const layerEl = React.createRef();
    const [color, setColor] = useState('');
  
    
    return (
      &lt;div className=&quot;home-page-div&quot;&gt;
        &lt;h1&gt;This is the Home page!&lt;/h1&gt;
      
        &lt;button onClick= { () =&gt; addLine(stageEl.current.getStage(), layerEl.current, color, &quot;pencil&quot;)}&gt;Pencil&lt;/button&gt;
       &lt;button onClick={ () =&gt; addLine(stageEl.current.getStage(), layerEl.current, color, &quot;brush&quot;)}&gt;Brush&lt;/button&gt;
        &lt;button onClick={() =&gt; addLine(stageEl.current.getStage(), layerEl.current, color, &quot;eraser&quot;)}&gt;Erase&lt;/button&gt;
        &lt;CompactPicker 
        color={color} 
        onChange={(color)=&gt;{setColor(color.hex)}}
        /&gt;       
        &lt;Stage
          width={window.innerWidth * 0.9}
          height={window.innerHeight - 150}
          ref={stageEl}
        
        &gt;
          &lt;Layer ref={layerEl}&gt;
          
          &lt;/Layer&gt;
        &lt;/Stage&gt;
      &lt;/div&gt;
    )
  };
  
  export default Home;
  </code></pre>
  <p>and addLine</p>
  <pre><code>export const addLine = (stage, layer, color, mode) =&gt; {
    let isPaint = false;
    let lastLine;
   
    stage.on(&quot;mousedown touchstart&quot;, function(e) {
      isPaint = true;
      let pos = stage.getPointerPosition();
      lastLine = new Konva.Line({
        stroke:  `${color}`,
        strokeWidth:  mode === &quot;brush&quot; ? 8 : mode === &quot;pencil&quot; ? 1 : 10,
        globalCompositeOperation:
          mode === &quot;eraser&quot; ? 'destination-out' : 'source-over',
        points: [pos.x, pos.y],
        draggable: false,
      });
      layer.add(lastLine);
    });
    console.log(mode);
    console.log(color);
    stage.on(&quot;mouseup touchend&quot;, function() {
      isPaint = false;
    });
    stage.on(&quot;mousemove touchmove&quot;, function() {
      if (!isPaint) {
        return;
      }
      
    const pos = stage.getPointerPosition();
      let newPoints = lastLine.points().concat([pos.x, pos.y]);
      lastLine.points(newPoints);
      layer.batchDraw();
    });
  };
     
  </code></pre>