HTML5 Canvas Example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>
<body>
<canvas width="800" height="800" id="canvas"></canvas>
</body>

CSS

#canvas {
    
}
.bubble
{
  position:relative;
  background:green;
  float:left;     /* because the image at left */
}
.bubbleborder
{
  position:absolute;
  top:0;
  left:0;
}
.bubbletext
{
  position:absolute;
  top:0;
  left:0;
  width:200px;
  height:170px;
  padding:80px 16px 16px 16px;
  text-align:center
}

JavaScript

fabric.speechBubble = fabric.util.createClass(fabric.Object, fabric.Observable, {

    type: 'speechBubble',

    initialize: function(options) {
        options || (options = {});
        this.callSuper('initialize', options);
        this.set('width', options.width || 200);
        this.set('height', options.height || 100);
        this.set('left', options.left || 100);
        this.set('top', options.top || 100);
        this.set('radius', options.radius || 20);
        this.set('pointerX', options.pointerX || null);
        this.set('pointerY', options.pointerY || null);
    },

    toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            pointerX : this.get('pointerX'),
            pointerY : this.get('pointerY'),
        });
    },

    _render: function (ctx) {

        //this.callSuper('_render', ctx);

        var r = this.left + this.width;
        var b = this.top + this.height;

        if ( this.pointerY < this.top || this.pointerY > this.top + this.height ) {
            var con1 = Math.min(Math.max(this.left + this.radius, this.pointerX - 10),r-this.radius-20);
            var con2 = Math.min(Math.max(this.left + this.radius + 20,this.pointerX + 10),r-this.radius);
        }
        else {
            var con1 = Math.min(Math.max(this.top + this.radius, this.pointerY - 10),b-this.radius-20);
            var con2 = Math.min(Math.max(this.top + this.radius + 20, this.pointerY + 10),b-this.radius);
        }

        var dir;

        if ( this.pointerY < this.top ) dir = 2;
        if ( this.pointerY > this.top) dir = 3;
        if ( this.pointerX < this.left && this.pointerY >= this.top && this.pointerY <=b ) dir = 0;
        if ( this.pointerX > this.left && this.pointerY >= this.top && this.pointerY <=b ) dir = 1;
        if ( this.pointerX >= this.left && this.pointerX <= r && this.pointerY >= this.top && this.pointerY <= b) dir = -1;

        console.log(dir);

        ctx.beginPath();
       ...