CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
Aditya
Aditya

Reputation: 2536

what cordinates should be given to making the line curve on a canvas

I have a canvas of dimensions width = 100px and height = 150px

I need to make curved lines by using the 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 to be filled in the function bezierCurveTo() in rdr to look curved line exactly in the screenshot provided.

enter image description here

Ingnore the dotted lines in the screenshot.

Upvotes: 4

Views: 52

Answers (1)

Tom Chapman
Tom Chapman

Reputation: 432

Heyaaaa

Disclaimer: I've never drawn to a plain 2d canvas before

I looked up the bezierCurveTo() method and it has 6 arguments that it requires.

I then 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 out for ya

Upvotes: 1

Related Questions