キャンバス上のJavascript描画スピンバブルfillStyleはテキストカラーのみを変更しています

Question

私は現在、javascriptを使用してキャンバス要素に描画するべきスピーチバブルを作成しようとしています。

私の問題：ctx.fillStyle = "red";は、ctx.fillTextの色を変更しています。しかし、全体のパスの背景色ではありません。どのように私は、全体の吹き出しに背景色を追加できますか？

Jsfiddle：https://jsfiddle.net/dr7q5yay/8/

私の現在のコードは次のようになります。

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); 

Answer 1

コードがほとんどあり、ちょうどfill()とfillStyleに関しての変更のいくつかの操作を行います。

Modified fiddle

arc()s to draw a rounded rectanglesも使用できます（オーバーヘッドはわずかです）。