title: Javascript draw speech bubble on canvas fillStyle is only changing textcolor
body: <p>I'm currently trying to create a speechbubble which should be drawn on a canvas element using <code>javascript</code>.</p>
  
  <p><strong>My problem:</strong> <code>ctx.fillStyle = "red";</code> is only changing the <code>ctx.fillText</code> color. But not the background color of the whole path. How could I add a background color to the whole speechbubble?</p>
  
  <p>Jsfiddle: <a href="https://jsfiddle.net/dr7q5yay/8/" rel="nofollow noreferrer">https://jsfiddle.net/dr7q5yay/8/</a></p>
  
  <p>My current code looks like the following:</p>
  
  <pre><code>var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext("2d");
  
  ctx.font = "15px Helvetica";
  var text = 'hello test test';
  
  function drawBubble(ctx, x, y, w, h, radius, text)
  {
     var r = x + w;
     var b = y + h;
  
     ctx.beginPath();
     ctx.fillStyle = "red";
     ctx.fill();
     ctx.strokeStyle = "black";
     ctx.lineWidth = "2";
     ctx.moveTo(x + radius, y);
  
     ctx.lineTo(r - radius, y);
     ctx.quadraticCurveTo(r, y, r, y + radius);
     ctx.lineTo(r, y + h-radius);
     ctx.quadraticCurveTo(r, b, r - radius, b);
     ctx.lineTo(x + radius, b);
     ctx.quadraticCurveTo(x, b, x, b - radius);
     ctx.lineTo(x, y + radius);
     ctx.quadraticCurveTo(x, y, x + radius, y);
     ctx.stroke();
     ctx.fillText(text, x + 20, y + 30);
  }
  
  drawBubble(ctx, 10, 60, ctx.measureText(text).width + 40, 50, 20, text);
  </code></pre>