Question

0

144

Views

not able to draw Bézier curve on html canvas

I am not able to draw bezierCurveTo on canvas if moveTo and bezierCurveTo start point are not exactly same, that is 4 decimal point in moveTo and 6 decimal points in bezierCurveTo and lineWidth is more 1

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "4"
ctx.moveTo(33.7605,56.51376);
ctx.bezierCurveTo(33.76049625,56.51376,117.53628,247.02303,742.75229,221.65138);
ctx.stroke();

<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T14:47:46.181Z

You don't even need the ctx.moveTo. Also, ctx.lineWidth should be a number.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 4;
ctx.bezierCurveTo(33.76049625,56.51376,117.53628,247.02303,742.75229,221.65138);
ctx.stroke();

<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">

Answer 2 · 2022-07-04T14:47:46.189Z

Types of bezier

bezierCurveTo() adds a cubic bezier to the path. A cubic bezier has a start and end point and two control points (a total of 4 points)

quadraticCurveTo() adds a quadratic bezier to the path. A quadratic bezier has a start and end point and one control points (a total of 3 points)

Keep control points away from end points

The first point of both beziers is that last point added to the current path. Adding the a control point on either the start or end points will cause problems. This is likely due to the fact that the distance between the start or end and control point is zero and it is impossibly to interpolate along a line of zero length.

Using a quadratic curve (3 points)

As you have given only 3 unique points I assume you want a quadratic rather than cubic curve.

Thus you can change the code from

ctx.moveTo(33.7605,56.51376);  // start point
ctx.bezierCurveTo(
    33.76049625, 56.51376, // control point 1 duplicated coordinate (too close)
    117.53628, 247.02303,  // control point 2
    742.75229, 221.65138   // end point
);

and use quadraticCurveTo, as...

ctx.moveTo(33.76049625, 56.51376); // start point
ctx.quadraticCurveTo(    
    117.53628, 247.02303,  // control point 1
    742.75229, 221.65138   // end point
);

Example

The red curve is a cubic with an undefined start point. As far as I can tell without a start point the behavior is undefined.

The Black curve is a quadratic the 3 coordinates from your code.

const ctx = myCanvas.getContext("2d");
ctx.lineWidth = 4; ctx.strokeStyle = "Red";
ctx.beginPath();
ctx.bezierCurveTo(
    33.76049625, 56.51376, // control point 1 duplicated coordinate (too close)
    117.53628, 247.02303,  // control point 2
    742.75229, 221.65138);   // end point
ctx.stroke();

ctx.strokeStyle = "Black";
ctx.beginPath();
ctx.moveTo(33.76049625, 56.51376); // start point
ctx.quadraticCurveTo(    
    117.53628, 247.02303,  // control point 1
    742.75229, 221.65138); // end point
ctx.stroke();

<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">

0

144