title: Arrow Line Brush in P5.js
body: <p>I am currently making a brush in p5.js</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>function setup() {
    createCanvas(400, 400);
    background(255)
  }
  
  function draw() {
   
    if(mouseIsPressed){
      
          stroke(255);
      fill(0);
  
     
      strokeWeight(30);
      triangle(mouseX, mouseY, pmouseX, pmouseY);
      stroke(0);
      strokeWeight(25);
      triangle(mouseX, mouseY, pmouseX, pmouseY);
  
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"&gt;&lt;/script&gt;&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;meta charset="utf-8" /&gt; &lt;/head&gt;&lt;body&gt; &lt;script src="sketch.js"&gt;&lt;/script&gt; &lt;/body&gt;  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is how it currently looks like
  <a href="https://i.stack.imgur.com/cxNOC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cxNOC.png" alt="enter image description here" /></a></p>
  <p>However, I would like to add a triangle at the end like this
  <a href="https://i.stack.imgur.com/9dQq3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9dQq3.png" alt="enter image description here" /></a></p>
  <p>Would that be possible?
  Any suggestions are welcome!</p>
  <p>Thank you :)</p>