What coordinates should be given so that the curve of the line on the canvas

Question

I have a canvas with dimensions width = 100pxandheight = 150px

I need to make crooked strings using function bezierCurveTo()

.html

<canvas id = "canvas" width = "100" height = "150"></canvas>

.ts

var canvas = <HTMLCanvasElement>document.getElementById('canvas');
var ctx = canvas.getContext('2d');

  ctx.strokeStyle = 'white';
  ctx.beginPath();
  ctx.lineWidth=3;
  ctx.moveTo(40,0);
  ctx.bezierCurveTo(); //what dimensions to be filled?
  ctx.lineTo(100,150)   
  ctx.stroke();

What dimesions should be filled in the function bezierCurveTo()in rdr in order to look like a curved line exactly in the screenshot.

Ingnore the dotted lines in the screenshot.

Answer 1

Heyaaaa

Disclaimer: I never painted until a simple 2d canvas before

I was looking for the bezierCurveTo () method and it has 6 arguments that it requires.

Then I built this CodePen for you.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.lineWidth=1;
//ctx.moveTo(40,0);
ctx.bezierCurveTo(30, 0, -70, 75, 100, 150);  //what dimensions to be filled?
//ctx.lineTo(100,150)   
ctx.stroke();

Let me know how it works for ya