HTML Canvas quadraticCurveTo() Method: Drawing Quadratic Bezier Curves

The quadraticCurveTo() method in the HTML Canvas API is a powerful tool for drawing quadratic Bezier curves. These curves are defined by a start point, an end point, and a single control point that determines the shape of the curve. Quadratic curves are widely used in graphic design, illustrations, and animation because they can create smooth, natural-looking curves. This guide will explore the quadraticCurveTo() method in detail, providing syntax, examples, and best practices.

Understanding Quadratic Bezier Curves

A quadratic Bezier curve is defined by three points:

1. Start Point: The beginning of the curve.
2. End Point: The end of the curve.
3. Control Point: A point that influences the curvature of the curve, pulling it towards itself but not necessarily on the curve itself.

The curve starts at the start point, smoothly bends towards the control point, and ends at the end point. This mechanism allows for the creation of flexible curves that are essential in web graphics.

Purpose of quadraticCurveTo()

The quadraticCurveTo() method allows you to:

• Draw smooth, curved lines that connect two points.
• Create more natural-looking shapes than can be achieved with straight lines.
• Design complex curves by combining multiple quadratic Bezier curves.
• Build detailed illustrations and graphics directly within the browser.

Syntax of quadraticCurveTo()

The quadraticCurveTo() method has the following syntax:

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

Where:

• cpx: The x-coordinate of the control point.
• cpy: The y-coordinate of the control point.
• x: The x-coordinate of the end point.
• y: The y-coordinate of the end point.

Parameter	Type	Description
cpx	Number	The x-coordinate of the control point. Determines the curvature along the x-axis.
cpy	Number	The y-coordinate of the control point. Determines the curvature along the y-axis.
x	Number	The x-coordinate of the end point of the quadratic curve.
y	Number	The y-coordinate of the end point of the quadratic curve.

Note: Before calling quadraticCurveTo(), you must have started a new path using beginPath() and moved to the start point of the curve using moveTo(). ⚠️

Basic Examples of quadraticCurveTo()

Let's explore how to use quadraticCurveTo() to draw basic quadratic curves.

Example 1: Simple Quadratic Curve

This example demonstrates a basic quadratic Bezier curve with a start point, end point, and a single control point.

<canvas
  id="canvasQuadCurve1"
  width="200"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_quad1 = document.getElementById("canvasQuadCurve1");
  const ctx_quad1 = canvas_quad1.getContext("2d");

  ctx_quad1.beginPath();
  ctx_quad1.moveTo(20, 75); // Start point
  ctx_quad1.quadraticCurveTo(100, 20, 180, 75); // Control point and end point
  ctx_quad1.strokeStyle = "blue";
  ctx_quad1.lineWidth = 2;
  ctx_quad1.stroke();

//]]]]><![CDATA[>
</script>

This code first moves the drawing cursor to the start point at (20, 75) using moveTo(). Then it draws a quadratic curve to the end point (180, 75) with a control point at (100, 20).

Example 2: Multiple Quadratic Curves

This example shows how to draw multiple quadratic curves to create a more complex shape.

<canvas
  id="canvasQuadCurve2"
  width="200"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_quad2 = document.getElementById("canvasQuadCurve2");
  const ctx_quad2 = canvas_quad2.getContext("2d");

  ctx_quad2.beginPath();
  ctx_quad2.moveTo(20, 75); // Start point

  ctx_quad2.quadraticCurveTo(50, 20, 100, 75);
  ctx_quad2.quadraticCurveTo(150, 130, 180, 75);

  ctx_quad2.strokeStyle = "green";
  ctx_quad2.lineWidth = 2;
  ctx_quad2.stroke();

//]]]]><![CDATA[>
</script>

This code draws two quadratic curves sequentially. The first curve goes from (20, 75) to (100, 75) with control point at (50, 20). The second curve goes from (100, 75) to (180, 75) with a control point at (150, 130).

Example 3: Filled Quadratic Curve

This example demonstrates how to draw and fill a quadratic curve to create a solid shape.

<canvas
  id="canvasQuadCurve3"
  width="200"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_quad3 = document.getElementById("canvasQuadCurve3");
  const ctx_quad3 = canvas_quad3.getContext("2d");

  ctx_quad3.beginPath();
  ctx_quad3.moveTo(20, 100);
  ctx_quad3.quadraticCurveTo(100, 20, 180, 100);
  ctx_quad3.lineTo(180, 120);
  ctx_quad3.quadraticCurveTo(100, 140, 20, 120);
  ctx_quad3.closePath();

  ctx_quad3.fillStyle = "orange";
  ctx_quad3.fill();

//]]]]><![CDATA[>
</script>

This code draws a closed shape using two quadratic curves and two straight lines, then fills the shape with orange color.

Tips for Using quadraticCurveTo()

• Start with beginPath(): Always start a new path with beginPath() before drawing curves. This separates distinct shapes.
• Use moveTo(): Use moveTo() to set the starting point of your curve before using quadraticCurveTo().
• Control Point Placement: Adjust the control point to change the shape of the curve. Moving the control point closer to a given point pulls the curve more toward that point.
• Combine with other methods: Combine quadraticCurveTo() with other path methods such as lineTo(), arc(), and other curve functions for complex shapes.
• Experiment: Experiment with different start, end, and control points to understand how each point impacts the resulting curve.

Real-World Application: Drawing a Heart Shape

Let's create a more complex example by drawing a heart shape using quadratic curves.

<canvas
  id="canvasHeart"
  width="200"
  height="200"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_heart = document.getElementById("canvasHeart");
  const ctx_heart = canvas_heart.getContext("2d");

  ctx_heart.beginPath();
  ctx_heart.moveTo(100, 150); // Start point

  // Left side of heart
  ctx_heart.quadraticCurveTo(50, 20, 10, 70);
  ctx_heart.quadraticCurveTo(10, 130, 100, 190);

  // Right side of heart
  ctx_heart.quadraticCurveTo(190, 130, 190, 70);
  ctx_heart.quadraticCurveTo(150, 20, 100, 150);


  ctx_heart.fillStyle = "red";
  ctx_heart.fill();

//]]]]><![CDATA[>
</script>

This example uses a combination of multiple quadraticCurveTo() calls to form the outline of a heart, demonstrating the power of combining these methods to create complex shapes.

Browser Support

The quadraticCurveTo() method is supported by all modern browsers.

Browser	Version
Chrome	All versions
Firefox	All versions
Safari	All versions
Edge	All versions
Opera	All versions
Internet Explorer	9+

Conclusion

The quadraticCurveTo() method is an essential part of the HTML Canvas API, allowing you to draw smooth quadratic Bezier curves on your web pages. By understanding its syntax and experimenting with different control points, you can create detailed and visually appealing graphics. This guide provides a solid foundation for using quadraticCurveTo() and serves as a starting point for further exploration in the world of canvas graphics. Start creating beautiful and unique curves today! 🎉