javascript - speech buble html5 canvas js -

i'm trying draw speech buble dragable handler. that's have:

• (x,y) - coordinates of lowest left corner of buble
• length of buble
• width of buble
• (x1,y1) coorinates of handler end

here picture better understanding:

i know how draw in canvas when coordinates known. it's pretty simple. tutorial

function drawbubble(ctx, x, y, w, h, radius) {   var r = x + w;   var b = y + h;   ctx.beginpath();   ctx.strokestyle="black";   ctx.linewidth="2";   ctx.moveto(x+radius, y);   ctx.lineto(x+radius/2, y-10);   ctx.lineto(x+radius * 2, 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(); } 

example in jsfiddle

but trouble - how find coordinates of red dots shown on picture. both (x,y) , (x1,y1) known change when user drags buble or handler. , in cases handler should pretty.

whould great if share code, it's kinda complicated me. in advance!

you can preserve corners , draw pointing bit fixed given point. need calculate correct connection points.

// example connection points 20px apart. // px , py variables here come onmousemove event. // finally, part here top part of bubble, // have watch 4 different scenarios, depending on // mouse , pointing bit should aim for. ... var con1 = math.min(math.max(x+radius,px-10),r-radius-20); var con2 = math.min(math.max(x+radius+20,px+10),r-radius); ... if(py < y) dir = 2; ... ctx.moveto(x+radius,y); if(dir==2){  ctx.lineto(con1,y);  ctx.lineto(px,py);  ctx.lineto(con2,y);  ctx.lineto(r-radius,y); } else ctx.lineto(r-radius,y); ctx.quadraticcurveto(r,y,r,y+radius); ... 

like this:

draggable bubble

try clicking on bubble drag pointer.