/**
 * Draw a speech bubble on an HTML5-Canvas
 *
 * @author Alexander Thiemann <mail@agrafix.net>
 * @license CC BY-SA 2.0
 * 
 * @param ctx Canvas 2d context
 * @param text Text for the speech bubble
 * @param x bottom left x-coordinate of speech bubble
 * @param y bottom left y-coordinate of speech bubble
 *
 */
function speechBubble(ctx, text, x, y) {
	var messure = ctx.measureText(text);
 
	var w = messure.width;
	var h = 20;
 
	ctx.beginPath();
	ctx.strokeStyle="black";
	ctx.lineWidth="1";
	ctx.fillStyle="rgba(255, 255, 255, 0.8)";
 
	ctx.moveTo(x, y);
	ctx.lineTo(x + (w*0.2), y);
	ctx.lineTo(x + (w*0.2), y+10);
	ctx.lineTo(x + (w*0.3), y);
	ctx.lineTo(x + w, y);
 
	ctx.quadraticCurveTo(x + (w*1.1), y, x + (w*1.1), y-(h*0.2)); // corner: right-bottom
 
	ctx.lineTo(x + (w*1.1), y-(h*0.8)); // right
 
	ctx.quadraticCurveTo(x + (w*1.1), y-h, x + w, y-h); // corner: right-top
 
	ctx.lineTo(x, y-h); // top
 
	ctx.quadraticCurveTo(x - (w*0.1), y-h, x - (w*0.1), y-(h*0.8)); // corner: left-top
 
	ctx.lineTo(x - (w*0.1), y-(h*0.2)); // left
 
	ctx.quadraticCurveTo(x - (w*0.1), y, x, y); // corner: left-bottom
 
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
 
	ctx.textAlign = 'left';
	ctx.fillStyle = '#000';
	ctx.fillText(text, x, y-6);
}

<canvas id="bubble"></canvas>

var ctx = document.getElementById("bubble").getContext('2d');
speechBubble(ctx, "Das hier ist ein Test!", 5, 40);