quadraticCurveTo() with control point manage by changing X & Y coordinates of the curve

Drag the sliders to change the X, Y position of control point.

void gctx.quadraticCurveTo(cpx, cpy, end_x, end_y);

cpx: X coordinate of Control Point
cpy: Y coordinate of Control Point
end_x: X coordinate of End point of Curve
end_y: Y coordinate of End Point of Curve

The start point of Bezier curve is last point of the current path or it can be set by using moveTo().

Bezier Curve with two control points


<canvas id="my_canvas" width="440"
 height="250" style="border:1px solid #000000;"></canvas>
<script>
var my_canvas=document.getElementById("my_canvas");
var gctx=my_canvas.getContext("2d");
gctx.beginPath();
gctx.moveTo(10,10);
gctx.quadraticCurveTo(120,100,380,20);
gctx.stroke();
</script>

DEMO Code

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var start_x=20;
var start_y=20;
var end_x=430;
var end_y=20;
var cpx=100;
var cpy=80;
my_function=function my_function(){
gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
gctx.beginPath()
gctx.moveTo(start_x,start_y);
gctx.strokeStyle= '#0046f5';
gctx.setLineDash([]);
gctx.quadraticCurveTo(cpx,cpy,end_x,end_y);
gctx.stroke();

gctx.beginPath()
gctx.fillStyle= '#ff00ff';
gctx.fillRect(cpx,cpy,5,5);
gctx.setLineDash([5,5]);
gctx.moveTo(start_x,start_y);
gctx.strokeStyle= '#d2d2f5';
gctx.lineTo(cpx,cpy);
gctx.lineTo(end_x,end_y);
gctx.stroke();
gctx.setLineDash([]);

$( "#textx" ).html("X position = " +  cpx );
$( "#texty" ).html("Y position = " +  cpy );
$( "#t1" ).html("gctx.quadraticCurveTo(
     "+cpx+","+cpy+","+end_x+","+end_y+");" );
}
//////////////////
///////////////////////////
$( "#sliderx" ).slider({
orientation:'horizontal',
min:0,
max:my_canvas.width,
step:1,
animate:'slow',
value:cpx,
disabled:false,
slide: function(event, ui) { 
cpx=ui.value;
my_function()
} 
});
///////////////////////////////
///////////////////////////
$( "#slidery" ).slider({
orientation:'horizontal',
min:0,
max:300,
step:1,
animate:'slow',
value:cpy,
disabled:false,
slide: function(event, ui) { 
cpy=ui.value;
my_function()
} 
});
///////////////////////////////

my_function()

quadraticCurveTo with control point on Canvas

Subscribe