Js Draw Circle on Canvas

Drawing shapes with canvas

« Previous
Adjacent »

Now that we have set up up our canvas environment, we tin can get into the details of how to draw on the canvas. By the stop of this commodity, yous will have learned how to describe 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 we will see how that can be washed.

The filigree

Earlier we tin commencement drawing, we need to talk almost the canvas filigree or coordinate space. Our HTML skeleton from the previous page had a canvas chemical element 150 pixels wide and 150 pixels high.

Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the elevation, at coordinate (10,y). After in this tutorial nosotros'll run into how we can interpret the origin to a dissimilar position, rotate the grid and even scale it, simply for now we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> only supports two archaic shapes: rectangles and paths (lists of points connected past lines). All other shapes must exist created by combining one or more paths. Luckily, we accept an assortment of path drawing functions which make information technology possible to compose very complex shapes.

Outset let'southward look at the rectangle. There are three functions that depict rectangles on the canvass:

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

Each of these iii functions takes the same parameters. ten and y specify the position on the canvas (relative to the origin) of the tiptop-left corner of the rectangle. width and height provide the rectangle'south size.

Beneath is the draw() function from the previous folio, but now it is making utilise of these three functions.

Rectangular shape example

                                                                            <html                    >                                                                              <torso                                          onload                                              =                        "                                                  describe                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </trunk                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  60                  ,                  60                  )                  ;                  ctx.                  strokeRect                  (                  l                  ,                  l                  ,                  fifty                  ,                  50                  )                  ;                  }                  }

This case's 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 square from the center, and then strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared square.

In upcoming pages nosotros'll run into two culling methods for clearRect(), and nosotros'll also run across how to alter the color and stroke style of the rendered shapes.

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

Drawing paths

Now allow'due south look at paths. A path is a listing of points, continued by segments of lines that tin be of different shapes, curved or non, of different width and of dissimilar color. A path, or even a subpath, can be closed. To brand shapes using paths, we take some extra steps:

First, yous create the path.
So y'all apply drawing commands to describe into the path.
Once the path has been created, you can stroke or fill up the path to render information technology.

Here are the functions used to perform these steps:

beginPath(): Creates a new path. In one case created, future drawing commands are directed into the path and used to build the path up.
Path methods: Methods to fix dissimilar paths for objects.
closePath(): Adds a straight line to the path, going to the showtime of the electric current sub-path.
stroke(): Draws the shape past stroking its outline.
fill(): Draws a solid shape by filling the path'due south content area.

The first step 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 fourth dimension this method is called, the list is reset and we can start drawing new shapes.

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

The 2d step is calling the methods that actually specify the paths to exist drawn. Nosotros'll run into these shortly.

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 just i point in the listing, this part does goose egg.

Note: When you call fill up(), any open shapes are closed automatically, then you don't accept to phone call closePath(). This is not the case when you phone call stroke().

Drawing a triangle

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

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

                                  office                  draw                  (                  )                  {                  var                  sail                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  50                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  75                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  25                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

The effect looks like this:

Moving the pen

One very useful role, which doesn't actually draw anything simply becomes part of the path list described higher up, is the moveTo() function. Yous can probably all-time think of this equally lifting a pen or pencil from one spot on a piece of paper and placing it on the side by side.

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

When the canvas is initialized or beginPath() is called, yous typically will want to use the moveTo() office to identify the starting point somewhere else. We could as well use moveTo() to draw unconnected paths. Take a look at the smiley face up below.

To effort this for yourself, you can use the lawmaking snippet beneath. Merely paste it into the draw() function we saw earlier.

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

                                  function                  draw                  (                  )                  {                  var                  canvass                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  lx                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Correct eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The consequence looks like this:

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

Annotation: To acquire more about the arc() function, see the Arcs section below.

Lines

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

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

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

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Filled triangle                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  25                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  105                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  25                  ,                  105                  )                  ;                  ctx.                  make full                  (                  )                  ;                  // 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 commencement a new shape path. Nosotros and then use the moveTo() method to motility the starting point to the desired position. Below this, 2 lines are fatigued which make upward two sides of the triangle.

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

Arcs

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

arc(10, y, radius, startAngle, endAngle, counterclockwise): Draws an arc which is centered at (ten, y) position with radius r starting at startAngle and ending at endAngle going in the given management indicated by 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 past a straight line.

Let'due south have a more than detailed await at the arc method, which takes six parameters: x and y are the coordinates of the centre of the circumvolve on which the arc should exist fatigued. radius is self-explanatory. The startAngle and endAngle parameters define the get-go and stop points of the arc in radians, along the curve of the circle. These are measured from the ten axis. The counterclockwise parameter is a Boolean value which, when truthful, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

The following case is a little more complex than the ones we've seen above. It draws 12 different arcs all with different angles and fills.

The 2 for loops are for looping through the rows and columns of arcs. For each arc, we start a new path past calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, just y'all wouldn't necessarily do that in real life.

The x and y coordinates should be articulate enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (half a circle) in the kickoff column and is increased by steps of xc degrees, culminating in a complete circle in the concluding cavalcade.

The statement for the clockwise parameter results in the commencement and 3rd row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the acme half stroked arcs and the bottom one-half filled arcs.

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (sheet.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                  *                  50                  ;                  // 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)                  /                  2                  ;                  // End point on circumvolve                  var                  counterclockwise                  =                  i                  %                  ii                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  fill                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

The next type of paths available are Bézier curves, available in both cubic and quadratic varieties. These are more often than not used to draw complex organic shapes.

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

The difference between these is that a quadratic Bézier bend has a starting time and an end betoken (bluish dots) and simply one control point (indicated by the ruby dot) while a cubic Bézier curve uses two command 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 get-go control indicate, and cp2x and cp2y are the coordinates of the 2d control point.

Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, nosotros don't have directly visual feedback as to what we're doing. This makes information technology pretty hard to draw circuitous shapes. In the post-obit example, we'll exist cartoon some unproblematic organic shapes, merely if you accept the time and, nearly of all, the patience, much more than circuitous shapes tin can be created.

There's naught very difficult in these examples. In both cases we run across a succession of curves being drawn which finally outcome in a complete shape.

Quadratic Bezier curves

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

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

                                  office                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  50                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  fifty                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  threescore                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

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

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

                                  part                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  xx                  ,                  62.5                  ,                  xx                  ,                  62.five                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  80                  ,                  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 three methods we saw in Drawing rectangles, which depict rectangular shapes directly to the canvas, there'south also the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

So far, each example on this page has used only one blazon of path function per shape. However, there's no limitation to the number or types of paths you tin use to create a shape. So in this final case, let's combine all of the path functions to make a set of very famous game characters.

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

                                  office                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  15                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  19                  ,                  150                  ,                  150                  ,                  9                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  xvi                  ,                  6                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  ten                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  10                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  7                  ,                  imitation                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  35                  ,                  iv                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  six                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  four                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  99                  ,                  4                  ,                  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 up                  (                  )                  ;                  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                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  make full                  (                  )                  ;                  }                  }                  // A utility function to draw a rectangle with rounded corners.                  part                  roundedRect                  (                  ctx,                    10,                    y,                    width,                    superlative,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (10,                  y                  +                  height,                  10                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  top,                  ten                  +                  width,                  y                  +                  elevation                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  ten                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks similar this:

Nosotros won't go over this in item, since information technology's actually surprisingly simple. The most important things to notation are the use of the fillStyle property on the drawing context, and the employ of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you practice often can be very helpful and reduce the amount of lawmaking you need, also as its complexity.

We'll take another look at fillStyle, in more detail, later 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 then dorsum once again.

Path2D objects

As we have seen in the final example, in that location can be a series of paths and drawing commands to describe objects onto your canvas. To simplify the code and to improve functioning, the Path2D object, bachelor in recent versions of browsers, lets you cache or record these drawing commands. Y'all are able to play back your paths quickly. Let'south see how we tin construct a Path2D object:

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

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // copy from some other Path2D object                  new                  Path2D                  (d)                  ;                  // path from SVG path information

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

The Path2D API too adds a manner to combine paths using the addPath method. This can be useful when you desire to build objects from several components, for example.

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

Path2D example

In this example, nosotros are creating a rectangle and a circle. Both are stored as a Path2D object, so that they are available for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to apply instead of the current path. Here, stroke and fill are used with a path statement to draw both objects onto the canvass, for example.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvass"                                        width                                          =                      "130"                                        tiptop                                          =                      "100"                                        >                                                                              </canvas                    >                                                                              </trunk                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  10                  ,                  ten                  ,                  50                  ,                  50                  )                  ;                  var                  circumvolve                  =                  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 canvas Path2D API is using SVG path data to initialize paths on your canvas. This might permit you to laissez passer around path information and re-utilise them in both, SVG and canvas.

The path will movement to point (M10 10) and then move horizontally eighty points to the correct (h 80), and then 80 points downwardly (v 80), so 80 points to the left (h -80), and and then back to the beginning (z). You can run across this example on the Path2D constructor folio.

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

« Previous
Next »

parkinsonfromment.blogspot.com

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

Parkinson Fromment