quadraticCurveTo with control point on Canvas



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()


plus2net.com




Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer