Quadratic curves

INTRODUCTION

Quadratic curves are defined by a starting point (called a “context point”), a control point, and an ending point. The curve fits the tangents between the context and control points and between the control and ending points.

 

TYPICAL USE

  1. context.moveTo(contextX, contextY);
  2. context.quadraticCurveTo(controlX, controlY, endX, endY);
  3. // Optional : set lineWidth and stroke color
  4. context.lineWidth = 5;
  5. context.strokeStyle = “#0000ff”;
  6. // Draw!
  7. context.stroke();

EXAMPLE 1: QUADRATIC CURVE

Try this interactive example: http://jsbin.com/vefivu/1/edit

quadratic curve example 1

Source code:

  1. var canvas=document.querySelector(‘#myCanvas1’);
  2. var context=canvas.getContext(‘2d’);
  3.  
  4. context.beginPath();
  5.  
  6. context.moveTo(100, 20);
  7. context.quadraticCurveTo(230, 200, 250, 20);
  8.  
  9. context.lineWidth = 5;
  10. context.strokeStyle = “#0000ff”;
  11. context.stroke();

We set a starting point in line 6: moveTo(…), then set the control and ending points with a call to quadraticCurve(…), at line 7, then set some properties for color, thickness, and finally we call the stroke() method for drawing the curve.

EXAMPLE 2: LINES CONNECTED WITH A QUADRATIC CURVE

Try this interactive example: http://jsbin.com/sibuse/1/edit

a line followed by a curve followed by a curve

Source code:

  1. context.beginPath();
  2. context.moveTo(100, 20);
  3. context.lineTo(200, 80);
  4. context.quadraticCurveTo(230, 200, 250, 20);
  5. context.lineTo(500, 90);
  6. context.lineWidth = 5;
  7. context.strokeStyle = “#0000ff”;
  8. context.stroke();
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s