Using the bezierCurveTo method

by Yaroslav Sosoniuk

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo -->

<canvas id="canvas"></canvas>

JavaScript

//  Define Canvas & Context
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

//  Define the Points as {x,y}
    var start=    { x: 50,    y: 20 };
    var cp1=    { x: 230,    y: 30 };
    var cp2=    { x: 150,    y: 60 };
    var end=    { x: 50,    y: 100 };

//  Draw Curve
    context.beginPath();
    context.moveTo(start.x,start.y);
    context.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
    context.stroke();

//  Start & End Points
    /* context.fillStyle = 'blue';
    context.beginPath();
    context.arc(start.x, start.y, 5, 0, 2*Math.PI);
    context.arc(end.x, end.y, 5, 0, 2*Math.PI);
    context.fill(); */

//  Control Points
    context.fillStyle = 'red';
    context.beginPath();
    context.arc(cp1.x, cp1.y, 5, 0, 2*Math.PI);
    context.arc(cp2.x, cp2.y, 5, 0, 2*Math.PI);
    context.fill();