HML5 Canvas Curves

1. Canvas Arc

Creating Arc HTML5 Canvas, by using arc() method.

HTML

<canvas id="myCanvas1" width="578" height="250"></canvas>

Script

<script>
  var canvas = document.getElementById('myCanvas1');
  var context = canvas.getContext('2d');
  context.beginPath();
  context.arc(200, 100, 80, 1.1 * 3.14, 1.9 * 3.14, false);
  context.lineWidth = 15;

  // line color
  context.strokeStyle = 'black';
  context.stroke();
</script>

2. Quadratic Curve

Creating a quadratic curve with HTML5 Canvas, by using the quadraticCurveTo() method.

HTML

<canvas id="myCanvas2" width="578" height="200"></canvas>

Script

<script>
var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;

// line color
context.strokeStyle = 'black';
context.stroke();
</script>

3. Bezier Curve

For creating a Bezier curve with HTML5 Canvas,by bezierCurveTo() method.

HTML

<canvas id="myCanvas3" width="578" height="200"></canvas>

Script

<script>
  var canvas = document.getElementById('myCanvas3');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.moveTo(188, 130);
  context.bezierCurveTo(140, 10, 388, 10, 388, 170);
  context.lineWidth = 10;

  // line color
  context.strokeStyle = 'black';
  context.stroke();
</script>