Requires: ctx.bezierCurveTo (. Cp1x, cp1y, and cp2x, cp2y, X, Y)
function Draw () { var Canvas = document.getElementById ( 'canv' ); IF (! canvas.getContext) return ; var CTX = canvas.getContext ( "2D" ); ctx.beginPath (); ctx.moveTo ( 40, 200); // start point var . cp1x = 20 is, cp1y = 100; // control points. 1 var and cp2x = 100, cp2y = 120; // control point 2 var X = 200, Y = 200; // end point // drawing cubic Bezier curve ctx.bezierCurveTo (. cp1x, cp1y, and cp2x, cp2y, X, Y); ctx.stroke (); // display control point ctx.beginPath(); ctx.rect(40, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(cp2x, cp2y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();