Draw Circles on a Canvas

Drawing shapes with canvas

« Previous
Adjacent »

Now that we accept gear up our canvas environment, we tin can get into the details of how to draw on the sheet. Past the end of this commodity, y'all volition have 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 canvas and nosotros will run across how that can exist done.

The grid

Before we can beginning drawing, we need to talk nigh the canvas grid or coordinate infinite. Our HTML skeleton from the previous page had a canvas element 150 pixels broad and 150 pixels loftier.

Normally i unit of measurement in the grid corresponds to one pixel on the canvas. The origin of this grid is positioned in the meridian left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the bluish foursquare becomes x pixels from the left and y pixels from the height, at coordinate (x,y). Afterwards in this tutorial we'll run into how we can translate the origin to a different position, rotate the grid and fifty-fifty scale it, simply for now we'll stick to the default.

Cartoon rectangles

Unlike SVG, <sail> just supports two primitive shapes: rectangles and paths (lists of points connected past lines). All other shapes must be created by combining one or more paths. Luckily, nosotros have an assortment of path cartoon functions which make information technology possible to compose very complex shapes.

Kickoff allow'south expect at the rectangle. There are three functions that describe rectangles on the canvas:

fillRect(x, y, width, height): Draws a filled rectangle.
strokeRect(ten, y, width, height): Draws a rectangular outline.
clearRect(x, 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 canvas (relative to the origin) of the pinnacle-left corner of the rectangle. width and meridian provide the rectangle'due south size.

Below is the draw() role from the previous page, but now it is making utilise of these three functions.

Rectangular shape instance

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

                                  function                  depict                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  'second'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  threescore                  ,                  lx                  )                  ;                  ctx.                  strokeRect                  (                  l                  ,                  50                  ,                  50                  ,                  50                  )                  ;                  }                  }

This example'south output is shown below.

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

In upcoming pages we'll encounter ii alternative methods for clearRect(), and we'll also run across how to change 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

Now let's expect at paths. A path is a listing of points, connected by segments of lines that can be of unlike shapes, curved or not, of different width and of different color. A path, or fifty-fifty a subpath, can be closed. To make shapes using paths, we have some actress steps:

First, you create the path.
Then you use drawing commands to draw into the path.
Once the path has been created, you can stroke or fill up the path to render it.

Here are the functions used to perform these steps:

beginPath(): Creates a new path. Once created, future drawing commands are directed into the path and used to build the path upward.
Path methods: Methods to prepare unlike 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 by stroking its outline.
fill up(): Draws a solid shape by filling the path's content area.

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

Note: When the current path is empty, such equally immediately later on calling beginPath(), or on a newly created canvas, the first path structure command is always treated as a moveTo(), regardless of what information technology actually is. For that reason, you will almost e'er want to specifically set your starting position subsequently resetting a path.

The 2nd step is calling the methods that actually specify the paths to be fatigued. We'll meet these soon.

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

Note: When y'all telephone call fill(), any open shapes are closed automatically, so yous don't have to call closePath(). This is not the case when you lot call stroke().

Cartoon a triangle

For example, the code for drawing a triangle would await something like this:

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

                                  role                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  50                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  75                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  25                  )                  ;                  ctx.                  make full                  (                  )                  ;                  }                  }

The upshot looks like this:

Moving the pen

One very useful function, which doesn't actually draw anything simply becomes part of the path list described above, is the moveTo() function. You can probably best remember of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the side by side.

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

When the canvass is initialized or beginPath() is called, yous typically will desire to apply the moveTo() function to place the starting indicate somewhere else. We could also use moveTo() to draw unconnected paths. Take a await at the smiley face beneath.

To effort this for yourself, y'all can utilise the code snippet beneath. Just paste it into the draw() function we saw earlier.

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

                                  role                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  'second'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  l                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  fake                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  v                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  truthful                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

If you'd like to see the connecting lines, you can remove the lines that call moveTo().

Note: To learn more most the arc() function, see the Arcs department beneath.

Lines

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

lineTo(x, y): Draws a line from the current cartoon position to the position specified by x and y.

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

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.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 by calling beginPath() to start a new shape path. We then utilize the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make upward 2 sides of the triangle.

You'll notice the difference between the filled and stroked triangle. This is, as mentioned higher up, because shapes are automatically closed when a path is filled, but non when they are stroked. If nosotros left out the closePath() for the stroked triangle, merely ii lines would have been fatigued, not a complete triangle.

Arcs

To depict arcs or circles, we use the arc() or arcTo() methods.

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

Let's have a more detailed look at the arc method, which takes 6 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 end points of the arc in radians, along the curve of the circle. These are measured from the x centrality. 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 role are measured in radians, non degrees. To convert degrees to radians you tin utilise the post-obit JavaScript expression: radians = (Math.PI/180)*degrees.

The following example is a little more complex than the ones we've seen above. Information technology draws 12 different 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 start a new path by calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily practice that in real life.

The x and y coordinates should be clear enough. radius and startAngle are stock-still. The endAngle starts at 180 degrees (one-half a circumvolve) in the start column and is increased by steps of xc degrees, culminating in a consummate circle in the terminal cavalcade.

The argument for the clockwise parameter results in the first and third row being drawn as clockwise arcs and the 2nd and quaternary row as counterclockwise arcs. Finally, the if argument makes the elevation half stroked arcs and the bottom half filled arcs.

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  l                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  50                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  two                  ;                  // Stop point on circle                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  fill up                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic Bézier curve from the electric current pen position to the end point specified past 10 and y, using the command signal 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 end point specified past ten and y, using the control points specified by (cp1x, cp1y) and (cp2x, cp2y).

The difference between these is that a quadratic Bézier curve has a commencement and an end point (blueish dots) and just i control point (indicated by the crimson dot) while a cubic Bézier curve uses two control points.

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

Using quadratic and cubic Bézier curves can be quite challenging, because different vector drawing software like Adobe Illustrator, nosotros don't have direct visual feedback as to what nosotros're doing. This makes it pretty hard to describe complex shapes. In the post-obit example, we'll exist cartoon some simple organic shapes, but if y'all have the time and, nigh of all, the patience, much more complex shapes tin exist created.

There'southward nothing very hard in these examples. In both cases we see a succession of curves being fatigued which finally event 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                          (                          )                          ;                                                "                                                              >                                                                              <sail                    id                                          =                      "canvass"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </sail                    >                                                                              </body                    >                                                                              </html                    >

                                  role                  describe                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves case                  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 instance draws a middle using cubic Bézier curves.

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2nd'                  )                  ;                  // Cubic curves instance                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  forty                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  xx                  ,                  25                  ,                  20                  ,                  62.5                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  eighty                  ,                  40                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  80                  ,                  130                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.5                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  40                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

Rectangles

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

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

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

Making combinations

And then far, each example on this page has used only one type of path part per shape. However, there's no limitation to the number or types of paths you lot can use to create a shape. And so in this last example, allow'due south combine all of the path functions to brand a set of very famous game characters.

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

                                  office                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.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                  ,                  six                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  ten                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  10                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  seven                  ,                  -Math.                  PI                  /                  vii                  ,                  imitation                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  35                  ,                  four                  ,                  iv                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  6                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  xvi                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  eight                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  sixteen                  ,                  99                  ,                  four                  ,                  4                  )                  ;                  }                  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.                  make full                  (                  )                  ;                  ctx.fillStyle                  =                  'blackness'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  ii                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  true                  )                  ;                  ctx.                  make full                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  two                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility part to describe a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (ten,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  height,                  ten                  +                  radius,                  y                  +                  peak,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  superlative,                  x                  +                  width,                  y                  +                  pinnacle                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (ten                  +                  width,                  y,                  x                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks like this:

We won't get over this in particular, since it's actually surprisingly simple. The well-nigh important things to annotation are the employ of the fillStyle property on the cartoon context, and the employ of a utility function (in this instance roundedRect()). Using utility functions for bits of drawing you do frequently tin can exist very helpful and reduce the corporeality of code yous need, likewise as its complexity.

Nosotros'll take another look at fillStyle, in more detail, subsequently in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of blackness to white, and and then back again.

Path2D objects

As we have seen in the terminal example, there tin can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to better performance, the Path2D object, available in contempo versions of browsers, lets y'all cache or record these drawing commands. You are able to play back your paths rapidly. Let's encounter how we tin construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path as an argument (creates a re-create), or optionally with a string consisting of SVG path data.

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // copy from another Path2D object                  new                  Path2D                  (d)                  ;                  // path from SVG path data

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

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

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

Path2D case

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

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

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

Using SVG paths

Another powerful feature of the new canvass Path2D API is using SVG path data to initialize paths on your canvas. This might permit you to pass around path information and re-use them in both, SVG and canvass.

The path volition move to point (M10 ten) and then motion horizontally 80 points to the right (h 80), and so 80 points downwardly (5 80), then lxxx points to the left (h -80), and then back to the start (z). You tin see this instance on the Path2D constructor page.

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

« Previous
Next »

foremansumbeyouned.blogspot.com

Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#:~:text=To%20draw%20arcs%20or%20circles,()%20or%20arcTo()%20methods.&text=Draws%20an%20arc%20which%20is,counterclockwise%20(defaulting%20to%20clockwise).