Cant Even Draw a Circle

Cartoon shapes with canvas

« Previous
Next »

Now that nosotros accept prepare up our canvas environment, we can get into the details of how to draw on the canvas. By the end of this article, you will accept learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvass and nosotros volition see how that tin exist done.

The grid

Earlier we can get-go cartoon, nosotros need to talk about the canvas filigree or coordinate space. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high.

Normally 1 unit of measurement in the grid corresponds to 1 pixel on the canvass. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. And so the position of the top left corner of the blue foursquare becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Later in this tutorial we'll run across how we can translate the origin to a unlike position, rotate the filigree and fifty-fifty scale information technology, but for at present nosotros'll stick to the default.

Drawing rectangles

Dissimilar SVG, <sheet> but supports ii archaic shapes: rectangles and paths (lists of points connected by lines). All other shapes must be created by combining ane or more than paths. Luckily, we accept an assortment of path drawing functions which brand information technology possible to compose very complex shapes.

First let'southward look at the rectangle. There are three functions that draw rectangles on the sail:

fillRect(ten, y, width, peak): Draws a filled rectangle.
strokeRect(x, y, width, superlative): Draws a rectangular outline.
clearRect(ten, y, width, peak): Clears the specified rectangular area, making it fully transparent.

Each of these three functions takes the aforementioned parameters. x and y specify the position on the canvass (relative to the origin) of the top-left corner of the rectangle. width and elevation provide the rectangle's size.

Below is the draw() function from the previous page, simply now it is making use of these 3 functions.

Rectangular shape case

                                                                            <html                    >                                                                              <torso                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvass                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  sixty                  ,                  threescore                  )                  ;                  ctx.                  strokeRect                  (                  fifty                  ,                  50                  ,                  50                  ,                  50                  )                  ;                  }                  }

This example'south output is shown beneath.

The fillRect() function draws a big black square 100 pixels on each side. The clearRect() role and then erases a 60x60 pixel square from the center, and and so strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared foursquare.

In upcoming pages we'll run into 2 alternative methods for clearRect(), and we'll also see how to alter the color and stroke fashion of the rendered shapes.

Unlike the path functions we'll see in the next section, all three rectangle functions draw immediately to the canvas.

Drawing paths

At present let's look at paths. A path is a list of points, continued past segments of lines that can be of different shapes, curved or non, of different width and of unlike colour. A path, or even a subpath, can be closed. To make shapes using paths, we accept some extra steps:

Commencement, yous create the path.
So you apply drawing commands to draw into the path.
One time the path has been created, you can stroke or make full the path to render it.

Hither are the functions used to perform these steps:

beginPath(): Creates a new path. One time created, futurity drawing commands are directed into the path and used to build the path upwards.
Path methods: Methods to set different paths for objects.
closePath(): Adds a straight line to the path, going to the start of the electric current sub-path.
stroke(): Draws the shape past stroking its outline.
fill(): Draws a solid shape by filling the path's content expanse.

The first pace to create a path is to telephone call the beginPath(). Internally, paths are stored as a listing of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is chosen, the listing is reset and we tin beginning drawing new shapes.

Note: When the current path is empty, such every bit immediately afterward calling beginPath(), or on a newly created sail, the first path structure command is ever treated as a moveTo(), regardless of what it really is. For that reason, yous will most ever desire to specifically set your starting position afterward resetting a path.

The second footstep is calling the methods that actually specify the paths to exist drawn. We'll see these soon.

The third, and an optional step, is to call closePath(). This method tries to close the shape by drawing a direct line from the current bespeak to the first. If the shape has already been closed or there's but one point in the listing, this function does nothing.

Annotation: When y'all call fill(), whatsoever open shapes are closed automatically, so you don't accept to call closePath(). This is not the case when you call stroke().

Drawing a triangle

For example, the code for drawing a triangle would look something similar this:

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "sail"                                        width                                          =                      "100"                                        height                                          =                      "100"                                        >                                                                              </canvas                    >                                                                              </torso                    >                                                                              </html                    >

                                  part                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  50                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  75                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  25                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

The consequence looks like this:

Moving the pen

Ane very useful role, which doesn't actually draw anything but becomes function of the path listing described above, is the moveTo() part. You tin probably all-time retrieve of this as lifting a pen or pencil from i spot on a piece of paper and placing it on the adjacent.

moveTo(x, y): Moves the pen to the coordinates specified past x and y.

When the sail is initialized or beginPath() is called, y'all typically will want to utilise the moveTo() function to place the starting point somewhere else. We could also use moveTo() to describe unconnected paths. Take a look at the smiley face below.

To try this for yourself, you can use the lawmaking snippet below. Just paste it into the draw() role we saw earlier.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <sail                    id                                          =                      "canvass"                                        width                                          =                      "150"                                        pinnacle                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Oral fissure (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  five                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  v                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

If you'd like to run into the connecting lines, y'all can remove the lines that call moveTo().

Notation: To larn more about the arc() office, see the Arcs department below.

Lines

For drawing straight lines, use the lineTo() method.

lineTo(x, y): Draws a line from the electric current drawing position to the position specified past ten and y.

This method takes 2 arguments, x and y, which are the coordinates of the line'southward end point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting betoken for the following, etc. The starting point can likewise be changed by using the moveTo() method.

The example below draws two triangles, one filled and 1 outlined.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <sheet                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </sheet                    >                                                                              </body                    >                                                                              </html                    >

                                  office                  depict                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Filled triangle                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  25                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  105                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  25                  ,                  105                  )                  ;                  ctx.                  fill                  (                  )                  ;                  // Stroked triangle                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  125                  ,                  125                  )                  ;                  ctx.                  lineTo                  (                  125                  ,                  45                  )                  ;                  ctx.                  lineTo                  (                  45                  ,                  125                  )                  ;                  ctx.                  closePath                  (                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

This starts past calling beginPath() to commencement a new shape path. We then use the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.

You'll find the difference between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically airtight when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, only 2 lines would have been drawn, not a complete triangle.

Arcs

To draw arcs or circles, we utilise the arc() or arcTo() methods.

arc(ten, y, radius, startAngle, endAngle, counterclockwise): Draws an arc which is centered at (10, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated past counterclockwise (defaulting to clockwise).
arcTo(x1, y1, x2, y2, radius): Draws an arc with the given control points and radius, continued to the previous point by a straight line.

Let's have a more than detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the start and stop points of the arc in radians, along the curve of the circle. These are measured from the x axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is fatigued clockwise.

Note: Angles in the arc part are measured in radians, not degrees. To catechumen degrees to radians you lot tin use the following JavaScript expression: radians = (Math.PI/180)*degrees.

The following example is a little more circuitous than the ones we've seen above. Information technology draws 12 unlike arcs all with different angles and fills.

The two for loops are for looping through the rows and columns of arcs. For each arc, we commencement a new path by calling beginPath(). In the lawmaking, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in existent life.

The 10 and y coordinates should be clear plenty. radius and startAngle are fixed. The endAngle starts at 180 degrees (half a circle) in the first cavalcade and is increased by steps of 90 degrees, culminating in a complete circumvolve in the last cavalcade.

The statement for the clockwise parameter results in the first and third row being fatigued as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the lesser half filled arcs.

Note: This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.

                                                                            <html                    >                                                                              <torso                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvass                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "200"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  office                  draw                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  iv                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  three                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  fifty                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  l                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  two                  ;                  // End point on circumvolve                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  ane                  )                  {                  ctx.                  fill                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

The next type of paths bachelor are Bézier curves, available in both cubic and quadratic varieties. These are generally used to draw circuitous organic shapes.

quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic Bézier curve from the electric current pen position to the end point specified by ten and y, using the control bespeak specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bézier curve from the current pen position to the cease point specified by x and y, using the command points specified by (cp1x, cp1y) and (cp2x, cp2y).

The difference between these is that a quadratic Bézier curve has a get-go and an end point (blue dots) and just one control bespeak (indicated past the crimson dot) while a cubic Bézier curve uses 2 control points.

The x and y parameters in both of these methods are the coordinates of the end signal. cp1x and cp1y are the coordinates of the first control betoken, and cp2x and cp2y are the coordinates of the second control signal.

Using quadratic and cubic Bézier curves can be quite challenging, because dissimilar vector drawing software similar Adobe Illustrator, we don't take straight visual feedback equally to what we're doing. This makes information technology pretty difficult to describe circuitous shapes. In the following example, nosotros'll be cartoon some simple organic shapes, merely if you have the time and, virtually of all, the patience, much more complex shapes can exist created.

There's nothing very difficult in these examples. In both cases we meet a succession of curves being drawn which finally result in a complete shape.

Quadratic Bezier curves

This example uses multiple quadratic Bézier curves to render a speech communication balloon.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <sheet                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  50                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  50                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  60                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.v                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

This example draws a heart using cubic Bézier curves.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        elevation                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  office                  describe                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  xl                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  seventy                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  xx                  ,                  62.5                  ,                  xx                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  80                  ,                  xl                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  eighty                  ,                  130                  ,                  62.v                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.5                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  twoscore                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

Rectangles

In addition to the three methods we saw in Drawing rectangles, which draw rectangular shapes directly to the canvas, there'southward also the rect() method, which adds a rectangular path to a currently open path.

rect(x, y, width, pinnacle): Draws a rectangle whose superlative-left corner is specified by (10, y) with the specified width and height.

Earlier this method is executed, the moveTo() method is automatically called with the parameters (x,y). In other words, the current pen position is automatically reset to the default coordinates.

Making combinations

Then far, each example on this page has used but i type of path function per shape. However, there'southward no limitation to the number or types of paths y'all tin can use to create a shape. Then in this final example, permit's combine all of the path functions to make a set of very famous game characters.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  describe                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvass"                                        width                                          =                      "150"                                        peak                                          =                      "150"                                        >                                                                              </canvass                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  describe                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  fifteen                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  nineteen                  ,                  150                  ,                  150                  ,                  9                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  16                  ,                  6                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  x                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  7                  ,                  fake                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  viii                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  35                  ,                  4                  ,                  iv                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  half dozen                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  sixteen                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  viii                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  99                  ,                  iv                  ,                  iv                  )                  ;                  }                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  102                  )                  ;                  ctx.                  bezierCurveTo                  (                  83                  ,                  94                  ,                  89                  ,                  88                  ,                  97                  ,                  88                  )                  ;                  ctx.                  bezierCurveTo                  (                  105                  ,                  88                  ,                  111                  ,                  94                  ,                  111                  ,                  102                  )                  ;                  ctx.                  lineTo                  (                  111                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  106.333                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  101.666                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  97                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  92.333                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  87.666                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'white'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  91                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  88                  ,                  96                  ,                  87                  ,                  99                  ,                  87                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  87                  ,                  103                  ,                  88                  ,                  106                  ,                  91                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  94                  ,                  106                  ,                  95                  ,                  103                  ,                  95                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  95                  ,                  99                  ,                  94                  ,                  96                  ,                  91                  ,                  96                  )                  ;                  ctx.                  moveTo                  (                  103                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  100                  ,                  96                  ,                  99                  ,                  99                  ,                  99                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  99                  ,                  103                  ,                  100                  ,                  106                  ,                  103                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  106                  ,                  106                  ,                  107                  ,                  103                  ,                  107                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  107                  ,                  99                  ,                  106                  ,                  96                  ,                  103                  ,                  96                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  ii                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  }                  }                  // A utility function to draw a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (10,                  y                  +                  acme,                  ten                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (ten                  +                  width,                  y                  +                  height,                  x                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  x                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  ten,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks like this:

We won't go over this in detail, since it's actually surprisingly uncomplicated. The most important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can exist very helpful and reduce the corporeality of lawmaking you lot need, besides as its complication.

We'll have another await at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using information technology to change the make full color for paths from the default color of black to white, and so back again.

Path2D objects

As we have seen in the terminal instance, at that place can be a series of paths and drawing commands to describe objects onto your canvass. To simplify the code and to improve performance, the Path2D object, bachelor in contempo versions of browsers, lets you cache or tape these drawing commands. You are able to play dorsum your paths quickly. Let'south come across how nosotros can construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with some other path as an statement (creates a copy), or optionally with a cord consisting of SVG path data.

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // re-create from some other Path2D object                  new                  Path2D                  (d)                  ;                  // path from SVG path data

All path methods like moveTo, rect, arc or quadraticCurveTo, etc., which we got to know above, are bachelor on Path2D objects.

The Path2D API besides adds a way to combine paths using the addPath method. This tin can be useful when yous want to build objects from several components, for case.

Path2D.addPath(path [, transform]): Adds a path to the electric current path with an optional transformation matrix.

Path2D case

In this instance, we are creating a rectangle and a circumvolve. Both are stored as a Path2D object, then that they are available for later usage. With the new Path2D API, several methods got updated to optionally have a Path2D object to use instead of the current path. Here, stroke and make full are used with a path statement to describe both objects onto the canvas, for example.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvass"                                        width                                          =                      "130"                                        height                                          =                      "100"                                        >                                                                              </sail                    >                                                                              </trunk                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  ten                  ,                  10                  ,                  50                  ,                  l                  )                  ;                  var                  circumvolve                  =                  new                  Path2D                  (                  )                  ;                  circle.                  arc                  (                  100                  ,                  35                  ,                  25                  ,                  0                  ,                  2                  *                  Math.                  PI                  )                  ;                  ctx.                  stroke                  (rectangle)                  ;                  ctx.                  fill                  (circle)                  ;                  }                  }

Using SVG paths

Some other powerful characteristic of the new sail Path2D API is using SVG path information to initialize paths on your canvas. This might permit you to pass around path data and re-employ them in both, SVG and canvas.

The path will motion to point (M10 10) and so move horizontally 80 points to the right (h 80), then 80 points down (5 80), and so fourscore points to the left (h -80), and and so back to the start (z). Yous can run into this example on the Path2D constructor page.

                                  var                  p                  =                  new                  Path2D                  (                  'M10 10 h 80 v 80 h -80 Z'                  )                  ;

« Previous
Next »

bushoffervers.blogspot.com

Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes