Adding html content on a moving element in Canvas

How I can add Html content on a moving element in the Canvas, like this one

http://www.html5canvastutorials.com/labs/html5-canvas-harmonic-oscillator/

where I need to display my link or button on the moving block attached to the spring. Generally for static canvas elements we can use Z-index or overlapping techniques, but th开发者_JAVA百科ese don't work in this case.

Any solutions ?

Check if the following script works:

<script src="http://www.html5canvastutorials.com/libraries/kinetic2d-v1.0.3.js">
</script>
<script>
    var button = {
        x: 0,
        y: 0,
        size: 16,
        width: 0,
        height: 0,
        padding: 4,
        hover: false,
        text: "Click Me",
        onclick: function (e) {
            // put your event handler code here
        }
    };

    function drawSpring(canvas, context){
        context.beginPath();
        context.moveTo(0, 0);

        for (var y = 0; y < 200; y++) {
            // Sine wave equation
            var x = 30 * Math.sin(y / 9.05);
            context.lineTo(x, y);
        }
    }

    function drawWeight(canvas, context, y){
        var size = 100;
        context.save();
        context.fillStyle = "red";
        context.fillRect(-size / 2, 0, size, size);
        context.restore();
        canvas.fillText(button.text, 0, 0);
        button.x = ((canvas.width - button.width) / 2) - button.padding;
        button.y = (y + (size - button.height) / 2) - button.padding;
    }

    window.onload = function(){
        var kin = new Kinetic_2d("myCanvas");
        var canvas = kin.getCanvas();
        var context = kin.getContext();
        context.font = button.size + "px Verdana";
        context.textAlign = "center";
        context.textBaseline = "top";
        button.width = 2 * button.padding + context.measureText(button.text);
        button.height = 2 * button.padding + button.size;
        var theta = 0;

        var curleft = 0;
        var curtop = 0;

        var obj = canvas;

        do {
            curleft += object.offsetLeft;
            curtop += object.offsetTop;
        } while (obj = obj.offsetParent);

        canvas.addEventListener("mousemove", function (e) {
            context.beginPath();
            context.rect(button.x, button.y, button.width, button.height);
            button.hover = context.isPointInPath(e.pageX - curleft, e.pageY - curtop);
        }, false);

        canvas.addEventListener("click", function (e) {
            if (button.hover) button.onclick(e);
        }, false);

        kin.setDrawStage(function(){
            theta += this.getTimeInterval() / 400;

            var scale = 0.8 * (Math.sin(theta) + 1.3);
            this.clear();

            context.save();
            context.translate(canvas.width / 2, 0);

            context.save();
            context.scale(1, scale);
            drawSpring(canvas, context);
            context.restore();

            context.lineWidth = 6;
            context.strokeStyle = "#0096FF"; // blue-ish color
            context.stroke();

            context.translate(0, 200 * scale);
            drawWeight(canvas, context, 200 * scale);
            context.restore();
        });

        kin.startAnimation();
    };
</script>