Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo below:

CanvasRenderingContext2D: quadraticCurveTo() method - Web APIs

Baseline Widely available

The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the quadratic Bézier curve.

quadraticCurveTo(cpx, cpy, x, y)

cpx

The x-axis coordinate of the control point.

cpy

The y-axis coordinate of the control point.

x

The x-axis coordinate of the end point.

y

The y-axis coordinate of the end point.

None (undefined).

This example shows how a quadratic Bézier curve is drawn.

<canvas id="canvas"></canvas>

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

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point
ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point
ctx.fill();

// Control point
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();

In this example, the control point is red and the start and end points are blue.

This example draws a simple quadratic Bézier curve using quadraticCurveTo().

<canvas id="canvas"></canvas>

The curve begins at the point specified by moveTo(): (20, 110). The control point is placed at (230, 150). The curve ends at (250, 20).

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

ctx.beginPath();
ctx.moveTo(20, 110);
ctx.quadraticCurveTo(230, 150, 250, 20);
ctx.stroke();

• The interface defining this method: CanvasRenderingContext2D
• Bézier curve

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4