Canvas Draw Quadratic

Posted in Canvas Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 23 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The HTML canvas element provides a powerful way to create dynamic graphics and animations directly within web pages. Among its features is the ability to draw quadratic curves, which can be used to create smooth, flowing shapes and lines.

In this guide, we'll explore how to draw quadratic curves on the HTML canvas.

💡 Syntax

To draw a quadratic curve on the canvas, you'll use the quadraticCurveTo() method. Here's the basic syntax:

Syntax

Copied

context.quadraticCurveTo(cp1x, cp1y, x, y);

🧰 Attributes

cp1x, cp1y: The coordinates of the control point that defines the curve's shape.
x, y: The coordinates of the end point of the curve.

📄 Example

Let's draw a simple quadratic curve on the canvas:

index.html

Copied

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

// Start the path
context.beginPath();
context.moveTo(20, 100); // Move to the starting point
context.quadraticCurveTo(100, 20, 200, 100); // Draw quadratic curve
context.stroke(); // Draw the curve

🧠 How it works?

In this example, we start a path, move to the starting point (20, 100), and then draw a quadratic curve to the point (200, 100) with the control point (100, 20).

🎉 Conclusion

Drawing quadratic curves on the HTML canvas adds a level of sophistication and fluidity to your graphical creations.

By understanding the syntax and usage of the quadraticCurveTo() method, you can leverage the power of quadratic curves to design visually stunning graphics and animations for your web projects.