Speech Buble Html5 Canvas Js

I'm trying to draw speech buble with dragable handler. That's what I have: (x,y) - coordinates of the lowest left corner of buble length of the buble width of the buble (x1,y1)

Solution 1:

You can preserve the corners and draw the pointing bit fixed to a given point. You just need to calculate the correct connection points.

// This is an example with the connection points 20px apart.// The px and py variables here come from the onmousemove event.// Finally, this part here is only for the top part of the bubble,// you have watch for 4 different scenarios, depending on where// the mouse is and thus what the 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 the bubble to drag the pointer.