Curve

To draw quadratic or bezier curve(s) on canvas

  • turned_in_notCurve Related Methods
    • quadraticCurveTo()
    • bezierCurveTo()


quadraticCurveTo( )

Used to define a quadraticCurve, to draw it on canvas, you have to use additional method stroke() or fill()

Syntax

ctx.quadraticCurveTo(cpx,cpy,x,y)

cpx, cpy - Control point 1 along XY-axis
x, y - End point along XY-axis

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.moveTo(30,30);
ctx.quadraticCurveTo(30,100,160,30);
ctx.stroke();
quadraticCurveTosubject
quadraticCurveToclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.moveTo(30,30);
  ctx.quadraticCurveTo(30,100,160,30);
  ctx.stroke();
</script>
</body>
</html>


bezierCurveTo( )

Used to define a bezierCurve, to draw it on canvas, you have to use additional method stroke() or fill()

Syntax

ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

cp1x, cp1y - Control point 1 along XY-axis
cp2x, cp2y - Control point 2 along XY-axis
x, y - End point along XY-axis

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.moveTo(20,80);
ctx.bezierCurveTo(130,10,160,120,190,40);
ctx.stroke();
bezierCurveTosubject
bezierCurveToclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.moveTo(20,80);
  ctx.bezierCurveTo(130,10,160,120,190,40);
  ctx.stroke();
</script>
</body>
</html>


  • Color
❮ Prev Path
Next ❯Color
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯