Javascript dessiner bulle sur toile fillStyle ne change que textcolor

Question

J'essaye actuellement de créer un speechbubble qui devrait être dessiné sur un élément de canevas en utilisant javascript.

Mon problème:ctx.fillStyle = "red"; ne change que la couleur ctx.fillText. Mais pas la couleur de fond du chemin entier. Comment pourrais-je ajouter une couleur d'arrière-plan à l'ensemble du discoursbubble?

jsFiddle: https://jsfiddle.net/dr7q5yay/8/

Mon code actuel ressemble à ce qui suit:

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

Le code est presque là, il suffit de quelques changements en ce qui concerne fill() et fillStyle:

Modified fiddle

Vous pouvez aussi utiliser arc()s to draw a rounded rectangles (un peu moins les frais généraux).