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...