How To Draw Power Curve In R

Firsthand drawing fashion vs path cartoon mode

Immediate Fashion = EXECUTING A CALL TO A Cartoon METHOD MEANS IMMEDIATELY Drawing IN THE Sheet

In the previous examples, we saw how to draw some rectangles using thefillRect(x, y, width, elevation)andstrokeRect(x, y, width, height) methods of the context.

Nosotros also learned how to depict a text message using thefillText(bulletin, 10, y) andstrokeText(bulletin, x, y) methods that draws a text in filled and wireframe mode, respectively.

These methods, along with thedrawImage(...) method already seen in section 3.3.iii, are"immediate methods": as soon as they are executed, the results are displayed on screen, the drawings are performed, pixels on the sheet area change their colors, etc.

Here is a code extract that volition draw 1000 random rectangles in a canvas, using immediate mode rectangle drawing calls.

1. var  sheet ,  ctx ,  w ,  h ;
3. function  init () {
4.     canvas =  document . getElementById ( 'myCanvas' );
5.     ctx =  canvas . getContext ( 'second' );
7.     westward =  canvass . width ;
8.     h =  canvass . height ;
10.     console . time ( "time to draw" );
12. for ( var  i = 0 ;  i < 1000 ;  i ++) {
13. var  10 = Math . random () *  w ;
14. var  y = Math . random () *  h ;
15. var  width = Math . random () *  w ;
16. var  height = Math . random () *  h ;
18.        ctx . strokeRect ( x ,  y ,  width ,  elevation );
19. }
20.     console . timeEnd ( "time to draw" );
21. }

Lines 12-18 draw 1000 rectangles of random sizes in immediate mode. We too measure the time using the usualconsole.time(name_of_timer) andconsole.timeEnd(name_of_timer) that volition write in the browser panel the time elapsed. Note thatconsole.fourth dimension(...) andconsole.timeEnd(...) display results merely in the browser's panel, not in the JS Bin panel.

On a Mac Volume Pro from 2015, the outcome is:

PATH MODE = FILL A BUFFER THEN EXECUTE ALL BUFFERED ORDERS AT ONCE TO ENABLE OPTIMIZATION AND PARALLELISM

There is some other drawing mode called "path drawing mode" where you outset transport drawing orders to the graphics processor, and these orders are stored in a buffer. Then you call methods to describe the whole buffer at in one case. There are also methods to erase the buffer's content.

Path drawing mode allows parallelism: if you need to describe ten.000 rectangles, it's meliorate to store the orders in the graphics card, then execute the cartoon all at once, rather than doing x.000 firsthand calls tostrokeRect(...) for instance. With the buffered manner, the Graphic Processing Unit (GPU) of the graphics card hardware will be able to parallelize the computations (modern graphics cards can execute hundreds/thousands of things in parallel).

Extract from source code (the function that draws the rectangles):

1. for ( var  i = 0 ;  i < 1000 ;  i ++) {
2. var  ten = Math . random () *  w ;
3. var  y = Math . random () *  h ;
4. var  width = Math . random () *  w ;
5. var  height = Math . random () *  h ;
7. ctx . rect ( x ,  y ,  width ,  height ); // shop a rectangle in path/buffer
8. }
9. ctx . stroke (); // draws the whole buffer (the 1000 rectangles) at once

Instead of callingstrokeRect(...) orfillRect(...), we just call therect(...) method of the context (line 7). This is how nosotros tin can delay the drawing of the rectangles. The 1000 rectangles are stored in a buffer in the hardware.

The call toctx.stroke() (line 9) or to its sister methodctx.make full() will draw the unabridged buffer contents in make full or stroke mode.

And here is what the timer gives: a slightly faster execution fourth dimension. Changing grand to 100.000 will give even larger differences.

Path style is faster than immediate manner!

RESET THE PATH Mode BUFFER

A call toctx.beginPath() will reset the buffer (empty its contents). Nosotros volition run into many more examples of using the Path drawing mode in some other section after on this week.

1. // start a new buffer / path
2. ctx . beginPath ();
4. // all these orders are in a buffer/path
5. ctx . moveTo ( 10 , 10 );
6. ctx . lineTo ( 100 , 100 );
7. ctx . lineTo ( 150 , 70 );
9. // Draw the buffer
10. ctx . stroke ();

SUMMARY OF PATH Way PRINCIPLES

1. Call drawing methods that work in path mode, for instance telephone callctx.rect(...) instead ofctx.strokeRect(...) orctx.fillRect(...)
2. Callctx.stroke() orctx.fill() to draw the buffer's contents,
3. Beware that the buffer is never emptied, two sequent calls toctx.stroke() will draw the buffer contents twice! Instead, utilisectx.beginPath() to empty it if needed.
4. It is possible to empty the buffer by callingctx.beginPath().
5. Path drawing is faster than immediate drawing (parallelization is possible).

1. Path drawing: lines

   INTRODUCTION

   We have been drawing rectangles so far.

   Permit's go a chip farther now past introducing the notion of "path cartoon". This approach consists in using thectx.moveTo(x, y) method of the context, in conjunction with other cartoon methods that end in "To", such asctx.lineTo(ten, y).

   This makes cartoon multiple connected lines easier. Consecutive calls toctx.lineTo(x, y) volition store in the path/buffer a set up of connected lines that we will depict altogether by a unmarried call toctx.stroke() orctx.fill().

   Hither are the unlike steps:

   1. Put the "pencil" somewhere with a call toctx.moveTo(x1, y1). This will be the origin of the beginning line.
   2. Call thectx.lineTo(x2, y2) method to draw a line from the previous position (previous pace) to the position passed as parameters to thelineTo(...) method. This position will serve as the origin for the next line to exist drawn.
   3. CalllineTo(x3, y3) again to draw a line that goes from (x2, y2) to (x3, y3). This line volition outset at the stop of the previous one.
   4. Repeat step iii to depict more than connected lines.
   5. Call thectx.stroke() or thectx.fill up() methods to draw the path defined past the different lines.

   Note that the call toctx.stroke() orctx.fill() will employ the current values of thestrokeStyle orfillStyle properties. It is possible to callctx.moveTo(x, y) in the center of steps i through 5 in order to movement the pen somewhere else without connecting to the last fatigued line.

   

   1. var  canvass = certificate . getElementById ( 'myCanvas' );
   2. var  ctx = sail . getContext ( '2d' );
   4. // Vertical lines
   5. for ( var  x = 0.5 ;  10 < 500 ;  x += 10 ) {
   6.     ctx . moveTo ( x , 0 );
   7.     ctx . lineTo ( ten , 375 );
   8. }
   10. // Horizontal lines
   11. for ( var  y = 0.v ;  y < 375 ;  y += 10 ) {
   12.     ctx . moveTo ( 0 ,  y );
   13.     ctx . lineTo ( 500 ,  y );
   14. }
   16. // Describe in blue
   17. ctx . strokeStyle = "#0000FF" ;
   19. // Before the execution of the next line zilch every bit been drawn yet !
   20. ctx . stroke ();

   In this instance, the entire grid is fatigued during the execution of the terminal line of code, with the single call toctx.stroke().

   Some other Example MIXING FILLED AND WIREFRAME SHAPES (AND Firsthand AND PATH MODES)

   

   1. var  canvas = certificate . getElementById ( 'myCanvas' );
   2. var  ctx = canvas . getContext ( '2d' );
   4. // a filled rectangle in immediate mode
   5. ctx . fillStyle = '#FF0000' ;
   6. ctx . fillRect ( 0 , 0 , lxxx , 100 );
   8. // ii sequent lines in path mode
   9. ctx . moveTo ( 0 , 0 );
   10. ctx . lineTo ( 100 , 100 );
   11. ctx . lineTo ( 100 , 0 );
   13. // draws only the two lines in wireframe mode
   14. ctx . strokeStyle = "#0000FF" ;
   15. ctx . stroke ();

   This instance shows that filled and wireframe shapes should be drawn differently (here a filled rectangle is drawn using a telephone call to thefillRect(...) method while a wireframe set of connected lines is fatigued using thestroke() method of the context).

   Drawing A Single PATH MADE WITH Disconnected LINES / PARTS

   

   1. var  canvas = document . getElementById ( 'myCanvas' );
   2. var  ctx = canvas . getContext ( '2d' );
   4. // first office of the path
   5. ctx . moveTo ( xx , 20 );
   6. ctx . lineTo ( 100 , 100 );
   7. ctx . lineTo ( 100 , 0 );
   9. // second role of the path, moveTo(...) is used to "jump" to another place
   10. ctx . moveTo ( 120 , twenty );
   11. ctx . lineTo ( 200 , 100 );
   12. ctx . lineTo ( 200 , 0 );
   14. // signal stroke color + depict the path
   15. ctx . strokeStyle = "#0000FF" ;
   16. ctx . stroke ();

   In this case, we simply chosen themoveTo() method betwixt each part of the path. And we chosenstroke() merely once to draw the whole path.

Drawing lines with unlike styles

Mutual Error: DRAWING THE SAME PATH TWICE

Permit's look at the drawing from the last example of the previous section:

Imagine that we would similar to draw them with unlike styles and colors: the shape on the left will stay every bit it is now (bluish, wireframe), while the 2d shape on the right volition be filled, colored in pinkish. Permit's look at how we can do this...

Cartoon Two PATHS WITH Unlike STYLES, THE Wrong AND THE Skillful WAY!

Offset, the wrong mode!

In this instance, we volition describe the two parts of the path with different styles: the first role in wireframe way, and the second part in filled mode.

What nosotros will attempt first is to phone callstroke() after the first half of the path, and then callfill() subsequently the second half of the path (bank check this interactive example):

Here is the code:

1. var  canvas = document . getElementById ( 'myCanvas' );
2. var  ctx = sail . getContext ( '2d' );
4. // commencement part of the path
5. ctx . moveTo ( 20 , 20 );
6. ctx . lineTo ( 100 , 100 );
7. ctx . lineTo ( 100 , 0 );
9. // indicate stroke colour + draw offset part of the path
10. ctx . strokeStyle = "#0000FF" ;
11. ctx . stroke ();
13. // 2d part of the path
14. ctx . moveTo ( 120 , twenty );
15. ctx . lineTo ( 200 , 100 );
16. ctx . lineTo ( 200 , 0 );
18. // indicate stroke colour + draw the path
19. ctx . fillStyle = "pink" ;
20. ctx . fill ();

Hey - it does non work! Weirdly, the two parts of the path are filled in pink! Just we calledstroke() after the starting time half of the path was drawn (lines v-eight). Then we calledmake full() only after the 2nd role of the path was specified (lines 14-19)... and then, what happened?

Remember thatfill() orstroke() draws the whole path, fifty-fifty if it is disconnected, and even if it has already been drawn!

What happened is:

1. The call to stroke()  has drawn the path corresponding to the lines five-7. Indeed, the get-go part of the path (on the left) has actually been drawn once in wireframe mode, and in blueish.
2. Then, the call tofill() at line 20 has drawn the whole path again, but in pink and in filled mode. But this time the path corresponds to lines 5-7 plus lines 14-16 that make upward the second shape on the correct. So the path that has been fatigued this time is fabricated of both of the triangles.

Important: If you do not want to draw parts of the same path several times, you need to draw two different paths, using thectx.beginPath() method, as shown in the next example.

At present, the right way!

Source code:

1. var  sheet = document . getElementById ( 'myCanvas' );
2. var  ctx = canvas . getContext ( 'second' );
4. // get-go part of the path
5. ctx . moveTo ( 20 , twenty );
6. ctx . lineTo ( 100 , 100 );
7. ctx . lineTo ( 100 , 0 );
9. // indicate stroke colour + depict commencement part of the path
10. ctx . strokeStyle = "#0000FF" ;
11. ctx . stroke ();
13. // start a new path, empty the electric current buffer
14. ctx . beginPath ();
16. // 2nd part of the path
17. ctx . moveTo ( 120 , 20 );
18. ctx . lineTo ( 200 , 100 );
19. ctx . lineTo ( 200 , 0 );
21. // point stroke colour + draw the path
22. ctx . fillStyle = "pink" ;
23. ctx . fill up ();

This time, in club to describe the two shapes differently, we defined two separate paths. The way to do this is just to callctx.beginPath() to start a new path. In this example, the first path has been drawn in wireframe style, so a new path has been started that is drawn in filled mode.

Drawing lines in immediate manner

Sometimes it might be useful to draw just 1 line without being in another path.

It'south interesting to encounter how we can write a single "describe line" function that takes the start and stop coordinates, the color, the line width, etc.

Here is the code:

1. function  drawLine ( x1 ,  y1 ,  x2 ,  y2 ,  color ,  width ) {
2.     ctx . save ();
4. // fix color and lineWidth, if these parameters
5. // are not divers, do nothing (default values)
6. if ( color )
7.         ctx . strokeStyle =  color ;
9. if ( width )
10.         ctx . lineWidth =  width ;
12. // first a new path
13.     ctx . beginPath ();
15.     ctx . moveTo ( x1 ,  y1 );
16.     ctx . lineTo ( x2 ,  y2 );
17.     ctx . stroke ();
19.     ctx . restore ();
20. }

Observe the save/restore of the context at the beginning/end of the function. This is Actually a expert practice to avoid affecting other functions' context.

• Line 13 starts a new path and then that the part will simply depict what it is meant to draw: a single line.

• Lines fifteen-17 move the "pen" at (x1, y1) then draw a line to (x2, y2), and the stroke at line 17 makes it announced on the screen.

1. drawLine ( 0 , 0 , 100 , 100 );
2. drawLine ( 0 , l , 150 , 200 , 'cherry-red' );
3. drawLine ( 10 , 100 , 100 , 10 , 'green' , 10 );

Issue:

Practical instance: drawing arrows

In this department, nosotros present a function that draws arrows in a canvas, such as in the illustration below:

You might notice multiple implementations on the Spider web for drawing arrows in a canvass, but the one we are presenting has the reward of being rather simple and has the possibility to set the color and line width of the arrows.

Let'southward see some examples of use:

1. // Adapted from : http://stackoverflow.com/questions/808826/depict-pointer-on-canvas-tag
2. function  drawArrow ( ctx ,  fromx ,  fromy ,  tox ,  toy ,  arrowWidth ,  color ){
3. //variables to be used when creating the arrow
4. var  headlen = 10 ;
5. var  angle = Math . atan2 ( toy - fromy , tox - fromx );
7.     ctx . relieve ();
8.     ctx . strokeStyle =  colour ;
10. //starting path of the arrow from the start foursquare to the end square
11.     //and drawing the stroke
12.     ctx . beginPath ();
13.     ctx . moveTo ( fromx ,  fromy );
14.     ctx . lineTo ( tox ,  toy );
15.     ctx . lineWidth =  arrowWidth ;
16.     ctx . stroke ();
18. //starting a new path from the head of the pointer to one of the sides of
19.     //the point
20.     ctx . beginPath ();
21.     ctx . moveTo ( tox ,  toy );
22.     ctx . lineTo ( tox - headlen * Math . cos ( angle - Math . PI / 7 ),
23.                toy - headlen * Math . sin ( angle - Math . PI / 7 ));
25. //path from the side point of the pointer, to the other side betoken
26.     ctx . lineTo ( tox - headlen * Math . cos ( angle + Math . PI / 7 ),
27.                toy - headlen * Math . sin ( angle + Math . PI / vii ));
29. //path from the side indicate dorsum to the tip of the arrow, and so
30.     //once more to the opposite side point
31.     ctx . lineTo ( tox ,  toy );
32.     ctx . lineTo ( tox - headlen * Math . cos ( angle - Math . PI / 7 ),
33.                toy - headlen * Math . sin ( angle - Math . PI / vii ));
35. //draws the paths created above
36.     ctx . stroke ();
38.     ctx . restore ();
39. }

An arrow is made of ane line (the pointer torso) and three connected lines (the pointer head).

Equally we change some context properties in that function, we callrelieve() andrestore() at the beginning and at the stop of the function.

This function can exist improved in many means: adding shadows, using fill up()  instead of stroke() , which gives strange results when the width is as well big, etc.

EXAMPLES

1. drawArrow ( ctx , x , 10 , 100 , 100 , 10 , 'red' );
3. drawArrow ( ctx , 100 , 10 , 140 , 140 , three , 'black' );

Consequence:

DRAW NICER ARROWS?

On the Web, you will detect many different ways to depict arrows.

This Web site is worth reading: http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html. It details how to describe arrows with curved heads and different styles for the head. Note however that you lot will need to alter some parts if you desire it to support different line widths, etc.

Screenshot from a demo bachelor on the to a higher place Web site:

In a next part of the course dedicated to bend drawing in a sheet, we will likewise show how to describe curved arrows, with very simple code (much simpler than the one used for cartoon the clock's arrows above).

Closing a path

Thectx.closePath() method indicates that we would similar a airtight path: draw from the concluding point to the start one.

Source lawmaking:

1. var  canvas = document . getElementById ( 'myCanvas' );
2. var  ctx = canvas . getContext ( '2d' );
4. // Path fabricated of iii points (defines ii lines)
5. ctx . moveTo ( 20 , 20 );
6. ctx . lineTo ( 100 , 100 );
7. ctx . lineTo ( 100 , 0 );
9. // Close the path, try commenting this line
10. ctx . closePath ();
12. // indicate stroke color + depict start part of the path
13. ctx . strokeStyle = "blueish" ;
14. ctx . stroke ();

• Lines 5-seven corresponds to a path made of two consecutive lines. If nosotros only callstroke() after that, two lines will be drawn on the canvas.
• Line 10 indicates that we would likea closed path. In that example, the call tostroke() atline 14 will depict the two lines plus an actress line that connects the last point of the path to the start one. It will describe a closed triangle!

Try commenting the line in the online example and meet the results!

Drawing circles and arcs

Thectx.arc(cx, cy, radius, startAngle, endAngle, drawInverse) method is useful for drawing arcs of circles. Information technology takes the heart of the circumvolve/arc, its radius, the starting angle of the arc (turning clockwise), the ending angle of the arc, and an optional parameter we volition talk about later.

TYPICAL USAGE

Typical usage for cartoon an arc/circle/ellipse is:

1. ctx . arc ( centerX ,  centerY ,  radius ,  startAngle ,  endAngle ); // clockwise drawing
3. ctx . arc ( centerX ,  centerY ,  radius ,  startAngle ,  endAngle , false );

The angles are in radians (between0 and2*Math.PI). The arc is fatigued clockwise. Beware that this may non seem natural if you're used to the trigonometric order.

The last parameter is optional and has a value offalse by default. Iftrue, instead of drawing an arc of circle that corresponds to the parameters, it will draw its complementary. See the examples below to encounter the departure.

EXAMPLE one: Cartoon AN ARC WITH RADIUS = 50, STARTING ANGLE = 0, END ANGLE = PI/ii

1. ctx . beginPath ();
2. // we ommited the last parameter
3. ctx . arc ( 100 , 75 , 50 , 0 , Math . PI / 2 );
5. ctx . lineWidth = x ;
6. ctx . stroke ();

Here is the outcome:

If we alter the terminal parameter (we omitted information technology, and so it took a value offalse past default):

1. ctx . beginPath ();
2. // we ommited the last parameter
3. ctx . arc ( 100 , 75 , 50 , 0 , Math . PI / 2,true );
5. ctx . lineWidth = 10 ;
6. ctx . stroke ();

And so, the outcome is the "complementary" of the previous arc:

Instance 2: DRAWING A FULL CIRCLE (FILLED + OUTLINED)

Source lawmaking:

1. var  canvas =  document . getElementById ( "myCanvas" );
2. var  ctx =  sail . getContext ( "2d" );
3. var  centerX =  canvas . width / 2 ;
4. var  centerY =  canvas . height / 2 ;
5. var  radius = 70 ;
7. ctx . beginPath ();
9. // Add to the path a total circle (from 0 to 2PI)
10. ctx . arc ( centerX ,  centerY ,  radius , 0 , ii * Math . PI , false );
12. // With path cartoon you lot tin can change the context
13. // properties until a call to stroke() or fill up() is performed
14. ctx . fillStyle = "lightBlue" ;
15. // Draws the filled circle in lite bluish
16. ctx . fill ();
18. // Set for the outline
19. ctx . lineWidth = 5 ;
20. ctx . strokeStyle = "black" ;
22. // draws Once again the path (the circumvolve), this
23. // fourth dimension in wireframe
24. ctx . stroke ();
26. // Find we called ctx.arc() simply once ! And drew information technology twice
27. // with different styles

Notice that we calledctx.arc() only one time! And drew it twice, with different styles, with calls toctx.stroke()andctx.fill(). Each call drew the divers path in wireframe and in filled mode!

PROPOSED PROJECTS

Project 1 - modify the previous example on http://jsbin.com/gazuba/2/edit in society to get:

Project two - make a modest program that draws a smiling head similar that (or brand something better!)

Cartoon rounded rectangles: thearcTo(x1, y1, x2, y2, radius) method

INTRODUCTION

There is another method calledctx.arcTo(x1, y1, x2, y2, radius), which is a bit complex to utilize, but very applied for drawing rounded rectangles.

TYPICAL Use

1. ctx . moveTo ( x0 ,  y0 );
3. ctx . arcTo ( x1 ,  y1 ,  x2 ,  y2 ,  radius );

This method can be confusing. It was divers mainly for cartoon rounded shapes like rounded rectangles. Nosotros used an excerpt here from the first-class tutorial on thearcTo(...) method available at http://www.dbp-consulting.com/tutorials/sail/CanvasArcTo.html.

It works like this:

1. Describe an imaginary line through (x0,y0)  and (x1,y1) , draw another imaginary line through (x1,y1)  and (x2,y2),
2. Have an imaginary circle of radiusr, and slide information technology upwards between the 2 lines until it just touches both lines. The two points at which the circle touches the lines are chosen the tangent points.
3. arcTo(x1, y1, x2, y2, r) volition draw a line from the current point(x0,y0) to the offset tangent point on the line from(x0,y0) to(x1,y1),
4. It volition likewise depict an arc from that tangent point to the other tangent point on the line from(x1,y1) to(x2,y2) along the circumference of the circle.
5. Finally, it adds the tangent signal where the arc ends upwardly, on the line from(x1,y1) to(x2,y2) to the path as the new current bespeak on the path.

Case one: SIMPLE USE

1. context . beginPath ();
2. context . moveTo ( 0 , 20 );
3. context . arcTo ( 100 , 100 , 200 , 20 , l );
5. context . lineWidth = 5 ;
6. context . strokeStyle = "#0000ff" ;
7. context . stroke ();

EXAMPLE ii: DRAW A ROUNDED RECTANGLE

Source code:

1. var  roundedRect = office ( ctx , x , y , width , superlative , radius , fill , stroke ) {
2.     ctx . beginPath ();
4. // draw top and superlative correct corner
5.    ctx . moveTo ( x + radius , y );
6.    ctx . arcTo ( 10 + width , y , 10 + width , y + radius , radius );
7. // depict right side and lesser right corner
8.    ctx . arcTo ( x + width , y + pinnacle , x + width - radius , y + superlative , radius );
9. // depict lesser and bottom left corner
10.    ctx . arcTo ( x , y + tiptop , x , y + summit - radius , radius );
11. // describe left and pinnacle left corner
12.    ctx . arcTo ( ten , y , x + radius , y , radius );
14. if ( make full ) {
15.       ctx . fill ();
16. }
18. if ( stroke ){
19.       ctx . stroke ();
20. }
21. }
23. var  canvass = certificate . getElementById ( 'myCanvas' );
24. var  ctx = canvas . getContext ( '2d' );
26. ctx . strokeStyle = 'rgb(150,0,0)' ;
27. ctx . fillStyle = 'rgb(0,150,0)' ;
28. ctx . lineWidth = vii ;
30. roundedRect ( ctx , xv , 15 , 160 , 120 , 20 , truthful , true );

In this example, each call toctx.arcTo(...) draws a side plus a corner. This makes united states of america suspect that thearcTo() method has been designed primarily for drawing rounded rectangles...

EXAMPLE 3 COMPARISON BETWEEN LINETO AND ARCTO

This example at JS Bin is the same as the previous one, except that we added at the terminate of the roundedRect function the same lines of code that depict the rounded rectangle, simply using lineTo instead of arcTo. Just requite it a await!

Quadratic curves

INTRODUCTION

Quadratic curves are defined by a starting point (chosen a "context point"), a control point, and an ending point. The bend fits the tangents betwixt the context and control points and betwixt the control and ending points.

The context point may be defined by a call to themoveTo(10, y) method of the context, or it may be the catastrophe point of a previous path, if nosotros're drawing a path made of several shapes. For case, drawing a line and a quadratic curve will brand the endpoint of the line the context bespeak for the quadratic curve.

The control point controls the curvature - if nosotros move the control point farther nosotros get a sharper curve.

TYPICAL USE

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

EXAMPLE 1: QUADRATIC Curve

Source code:

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

We set a starting indicate in line 6:moveTo(...), then set the control and ending points with a call toquadraticCurve(...), at line 7, and so set up some backdrop for color, thickness, and finally we call thestroke() method for drawing the bend.

EXAMPLE ii: 50INES Connected WITH A QUADRATIC Curve

Source code:

1. context . beginPath ();
3. context . moveTo ( 100 , 20 );
4. context . lineTo ( 200 , 80 );
5. context . quadraticCurveTo ( 230 , 200 , 250 , 20 );
6. context . lineTo ( 500 , xc );
8. context . lineWidth = v ;
9. context . strokeStyle = "#0000ff" ;
10. context . stroke ();

Practical instance: use quadratics for drawing curved arrows

Nosotros suggest a useful function for drawing curved arrows. The code is a modified version of what has been proposed by several contributors to this thread at StackOverflow.

Source code of the role that draws a curved pointer:

1. part  drawCurvedArrow ( startPointX ,  startPointY ,
2.                          endPointX ,  endPointY ,
3.                          quadPointX ,  quadPointY ,
4.                          lineWidth ,
5.                          arrowWidth ,
6.                          colour ) {
7. // All-time Practice: the function changes color and lineWidth -> save context!
8.     ctx . salvage ();
10.     ctx . strokeStyle =  color ;
11.     ctx . lineWidth =  lineWidth ;
13. // angle of the end tangeant, useful for drawing the arrow head
14. var  arrowAngle = Math . atan2 ( quadPointX -  endPointX ,  quadPointY - endPointY ) + Math . PI ;
16. // offset a new path
17.     ctx . beginPath ();
19. // Torso of the arrow
20.     ctx . moveTo ( startPointX ,  startPointY );
21.     ctx . quadraticCurveTo ( quadPointX ,  quadPointY ,  endPointX ,  endPointY );
23. // Caput of the arrow
24.     ctx . moveTo ( endPointX - ( arrowWidth * Math . sin ( arrowAngle - Math . PI / 6 )),
25.                endPointY - ( arrowWidth * Math . cos ( arrowAngle - Math . PI / half-dozen )));
27.     ctx . lineTo ( endPointX ,  endPointY );
29.     ctx . lineTo ( endPointX - ( arrowWidth * Math . sin ( arrowAngle + Math . PI / 6 )),
30.                endPointY - ( arrowWidth * Math . cos ( arrowAngle + Math . PI / 6 )));
32.     ctx . stroke ();
33.     ctx . closePath ();
35. // BEST PRACTICE -> restore the context equally we saved information technology at the commencement
36. // of the function
37.     ctx . restore ();
38. }

This function takes equally parameters the start and cease points, the command betoken of the bend, the pointer width, the width of the arrow caput.

It computes the angle of the arrow at its endpoint (line 14) in lodge to compute the rotated endpoints of the ii lines of the arrow caput (lines 24 and 29).

Notice that once again, as we alter the context backdrop (color, lineWidth) in the body of the function, we save and restore the context at the beginning / end of the function.

Bezier curves

INTRODUCTION

Bezier curves are interesting generally for drawing "S" shapes or asymmetric curves.

Bezier curves are divers by a context point, similarly to quadratic curves, two control points that ascertain two tangents, and an catastrophe point.

The beginning part of the bend is tangential to the imaginary line divers by the context point and the offset command point. The second part of the curve is tangential to the imaginary line defined by the 2nd control bespeak and the ending point.

The all-time way to empathize how they work is to check out one of these interactive applications:

• http://blogs.sitepointstatic.com/examples/tech/canvass-curves/bezier-curve.html
• http://lib.ivank.net/?p=demos&d=bezier
• Prissy video tutorial: http://vimeo.com/106757336

TYPICAL USAGE OF BEZIER CURVES

Source lawmaking:

1. ctx . moveTo ( contextX ,  contextY );
2. context . bezierCurveTo ( controlX1 ,  controlY1 ,  controlX2 ,  controlY2 ,  endX ,  endY );
3. // Optional : set lineWidth and stroke color
4. context . lineWidth = 5 ;
5. context . strokeStyle = "#0000ff" ;
6. // Draw!
7. ctx . stroke ();

EXAMPLE i

1. context . beginPath ();
3. context . moveTo ( 100 , 20 );
4. context . bezierCurveTo ( 290 , - 40 , 200 , 200 , 400 , 100 );
6. context . lineWidth = 5 ;
7. context . strokeStyle = "#0000ff" ;
8. context . stroke ();

EXAMPLE 2 WITH LINES, QUADRATIC, AND BEZIER CURVES IN A PATH

Extract from source lawmaking:

1. context . beginPath ();
3. context . moveTo ( 100 , 20 );
5. context . lineTo ( 200 , 160 );
6. context . quadraticCurveTo ( 230 , 200 , 250 , 120 );
7. context . bezierCurveTo ( 290 , - forty , 300 , 200 , 400 , 150 );
8. context . lineTo ( 500 , 90 );
10. // TRY COMMENTING THIS LINE OUT
11. context . closePath ();
12. context . lineWidth = 5 ;
13. context . strokeStyle = "#0000ff" ;
14. context . stroke ();

In this example we use theclosePath() method to draw a line between the last path point and the first path point (line 11), so that the drawing looks like a pair of goggles.

Note how the dissimilar parts are linked together and brand a "path":

INTERESTING, INTERACTIVE TOOL FOR GENERATING CODE THAT DRAWS BEZIER CURVES

Screenshot:

Source: https://masf-html5.blogspot.com/2016/04/path-drawing-mode-lines-circles-arcs.html

Posted by: maxeyjact1957.blogspot.com

Share this post