title: Is there an easy way in p5.js to draw a transparent shape without having the outline being drawn onto that shape?
body: <p>I am trying to draw an opaque shape on top of a colorful background in p5.js. So I give both the fill color and the stroke color an alpha value. The problem is that the outline of the shape is partly drawn onto the shape. Because of the opaque stroke, this makes it look like there is two outlines with different colors. Here is an example:</p>
  <pre class="lang-js prettyprint-override"><code>function setup() {
      createCanvas(60, 60);
  }
  
  function draw() {
      background(255);
  
      fill(127,127);
      stroke(50,127);
      strokeWeight(5);
  
      rect(10,10,40,40);
  }
  </code></pre>
  <p>What I get is <a href="https://i.stack.imgur.com/9BsVQ.png" rel="nofollow noreferrer">this square</a> which appears to have an inner dark gray and an outer light gray bounding box.</p>
  <p>Is there an easy way to prevent this from happening? I know I could draw the shape &quot;twice&quot; (first the fill and then the outline a little bit further out), but
  I am trying to draw a rather complicated polygon, so I would have to adjust all the vertex coordinates of the outer shape which would be pretty annoying to work out.</p>
  <p>I have already tried the different blendModes, but they didn't seem to be able to solve my problem.</p>