Draw curves over HTML table

Question

Is it possible in JavaScript or Angular to use the mouse to draw quadratic curves over an HTML table's contents?

The table contents have to remain editable, and the curve's path is supposed to be editable too, using a mouse and 3 points on the curve path, like in a word processor.

Here is how it supposed to look like:

This is what I tried so far:

/* 
 * Code used in example - adjusted part of "Canvas curves example"
 * By Craig Buckler, http://twitter.com/craigbuckler
 * Refer to:
 * http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
 */

(function() {

    var canvas, ctx, point, style, drag = null, dPoint;

    // define initial points
    function Init() {

        point = {
            p1: { x:180, y:100 },
            p2: { x:180, y:200 }
        };

        point.cp1 = { x: 250, y: 150 };

        // default styles
        style = {
            curve:  { width: 2, color: "blue" },
            cpline: { width: 1, color: "transparent" },
            point: { radius: 5, width: 2, color: "#ggg", fill: "#eee", arc1: 0, arc2: 2 * Math.PI },
        }

        // line style defaults
        ctx.lineCap = "round";
        ctx.lineJoin = "round";

        // event handlers
        canvas.onmousedown = DragStart;
        canvas.onmousemove = Dragging;
        canvas.onmouseup = canvas.onmouseout = DragEnd;

        DrawCanvas();
    }

    // draw canvas
    function DrawCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // curve
        ctx.lineWidth = style.curve.width;
        ctx.strokeStyle = style.curve.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);
        ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
        ctx.stroke();

        // control points
        for (var p in point) {
            ctx.lineWidth = style.point.width;
            ctx.strokeStyle = style.point.color;
            ctx.fillStyle = style.point.fill;
            ctx.beginPath();
            ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
            ctx.fill();
            ctx.stroke();
        }
    }   

    function DragStart(e) {
        e = MousePos(e);
        var dx, dy;
        for (var p in point) {
            dx = point[p].x - e.x;
            dy = point[p].y - e.y;
            if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
                drag = p;
                dPoint = e;
                canvas.style.cursor = "move";
                return;
            }
        }
    }

    function Dragging(e) {
        if (drag) {
            e = MousePos(e);
            point[drag].x += e.x - dPoint.x;
            point[drag].y += e.y - dPoint.y;
            dPoint = e;
            DrawCanvas();
        }
    }

    function DragEnd(e) {
        drag = null;
        canvas.style.cursor = "default";
        DrawCanvas();
    }

    function MousePos(event) {
        event = (event ? event : window.event);
        return {
            x: event.pageX - canvas.offsetLeft,
            y: event.pageY - canvas.offsetTop
        }
    }

    canvas = document.getElementById("canvas");
    code = document.getElementById("code");
    if (canvas.getContext) {
        ctx = canvas.getContext("2d");
        Init(canvas.className == "quadratic");
    }
})();

#canvas
{
    position: absolute;
    margin: 0 10px 10px 0;
}

#table td {
    height: 100px;
    width: 200px;
    border: 1px solid grey;
    text-align: center;
}

<canvas id="canvas" height="600" width="600" class="quadratic">

</canvas>
<table id="table">
    <tr>
        <td contenteditable="true">editable text</td>
        <td contenteditable="true">editable text</td>
        <td contenteditable="true">editable text</td>
    </tr>
    <tr>
        <td contenteditable="true">editable text</td>
        <td contenteditable="true">editable text</td>
        <td contenteditable="true">editable text</td>
    </tr>
    <tr>
        <td contenteditable="true">editable text</td>
        <td contenteditable="true">editable text</td>
        <td contenteditable="true">editable text</td>
    </tr>
</table>

I cannot click on the table cells and edit the text inside.