How to draw a quadratic curved line between two text objects within a HTML5 canvas?

Question

Hi,

Goal per subject.

code snip:

 var canvas= document.getElementById('myCanvas');
 var ctx= canvas.getContext('2d');   
    canvas.width= 520;
    canvas.height= 405;
    ctx.font = "15pt Verdana";
    ctx.lineWidth = 1;

    // text 1
    ctx.fillText("me and my dog puddie", 210, 90);  
    // text 2
    ctx.fillText("you and many many crazy nuts", 210, 130); 

  // draw a quadratic bezier curved line between the these 2 text blocks
    ctx.strokeStyle = "rgb(65,60,50)";
    ctx.beginPath();
    ctx.moveTo(210,100);
    ctx.bezierCurve(230,250,130,160,160,100);
    ctx.stroke();

 /* outcome:

 no line were drawn between these two text objects

 */

 // comment:
 I have a very limited understanding of a quadratic curved line

Thanks in advance.

Answer 1

Change the line

ctx.bezierCurve(230,250,130,160,160,100);

to

ctx.bezierCurveTo(230,250,130,160,160,100);

and you should be good to go.

You should also start marking accepted answers to your questions.