Draw a Circle on Canvas Javascript

April 09, 2022 Post a Comment

Drawing shapes with canvas

« Previous
Side by side »

Now that we accept set up upward our canvas surround, we can get into the details of how to draw on the canvas. By the end of this article, you will 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 cartoon objects onto the canvas and nosotros will meet how that tin be done.

The grid

Before we tin can start drawing, nosotros need to talk virtually the canvas grid or coordinate space. Our HTML skeleton from the previous folio had a sail element 150 pixels broad and 150 pixels loftier.

Commonly 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this filigree is positioned in the height left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blueish square becomes x pixels from the left and y pixels from the tiptop, at coordinate (ten,y). Afterwards in this tutorial nosotros'll see how we can translate the origin to a different position, rotate the grid and even scale information technology, only for at present we'll stick to the default.

Drawing rectangles

Unlike SVG, <sheet> only supports two primitive shapes: rectangles and paths (lists of points connected past lines). All other shapes must be created by combining one or more than paths. Luckily, we have an array of path cartoon functions which make it possible to compose very complex shapes.

Offset permit's look at the rectangle. At that place are three functions that draw rectangles on the canvas:

fillRect(10, y, width, meridian): Draws a filled rectangle.
strokeRect(x, y, width, height): Draws a rectangular outline.
clearRect(ten, y, width, height): Clears the specified rectangular area, making information technology fully transparent.

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

Below is the draw() function from the previous folio, but at present information technology is making use of these three functions.

Rectangular shape instance

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

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

This example'due south output is shown below.

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

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

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

Cartoon paths

At present let's look at paths. A path is a list of points, continued by segments of lines that can be of different shapes, curved or not, of different width and of different color. A path, or fifty-fifty a subpath, can exist closed. To make shapes using paths, we take some extra steps:

Get-go, you create the path.
So y'all use drawing commands to draw into the path.
Once the path has been created, you lot can stroke or fill the path to return it.

Here are the functions used to perform these steps:

beginPath(): Creates a new path. Once created, future cartoon commands are directed into the path and used to build the path upward.
Path methods: Methods to set dissimilar paths for objects.
closePath(): Adds a direct line to the path, going to the outset of the current sub-path.
stroke(): Draws the shape by stroking its outline.
make full(): Draws a solid shape by filling the path's content area.

The first footstep to create a path is to telephone call the beginPath(). Internally, paths are stored every bit 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 commencement 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 control is e'er treated as a moveTo(), regardless of what it actually is. For that reason, you volition about always want to specifically fix your starting position after resetting a path.

The 2nd stride is calling the methods that really specify the paths to be drawn. Nosotros'll see these soon.

The third, and an optional stride, is to call closePath(). This method tries to close the shape by drawing a direct line from the current indicate to the outset. If the shape has already been closed or there'southward only 1 point in the listing, this function does nix.

Notation: When yous call fill(), whatever open shapes are closed automatically, so yous don't have to call closePath(). This is non the example when you telephone call stroke().

Cartoon a triangle

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

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

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

The result looks like this:

Moving the pen

One very useful function, which doesn't actually depict anything only becomes part of the path listing described in a higher place, is the moveTo() office. You can probably best think of this equally lifting a pen or pencil from one spot on a piece of paper and placing information technology on the side by side.

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

When the canvas is initialized or beginPath() is called, you typically will want to utilize the moveTo() function to place the starting point somewhere else. We could also utilize moveTo() to describe unconnected paths. Have a look at the smiley face below.

To try this for yourself, you tin can use the lawmaking snippet below. Just paste it into the draw() office nosotros saw before.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  fake                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  sixty                  ,                  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 outcome looks like this:

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

Annotation: To larn more about the arc() function, come across the Arcs department beneath.

Lines

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

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

This method takes 2 arguments, x and y, which are the coordinates of the line's end bespeak. 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 betoken can as well be inverse by using the moveTo() method.

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

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

                                  office                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  'second'                  )                  ;                  // 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. Nosotros then use the moveTo() method to motion the starting indicate to the desired position. Below this, two lines are drawn which make up two sides of the triangle.

You'll notice the departure betwixt the filled and stroked triangle. This is, as mentioned in a higher place, because shapes are automatically airtight when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, just two lines would have been drawn, not a complete triangle.

Arcs

To draw 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 management indicated past counterclockwise (defaulting to clockwise).
arcTo(x1, y1, x2, y2, radius): Draws an arc with the given control points and radius, connected to the previous betoken past a straight line.

Let'southward have a more detailed expect at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the first and end points of the arc in radians, forth the bend of the circle. These are measured from the 10 axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

The following example is a trivial more circuitous than the ones nosotros've seen above. Information technology draws 12 different arcs all with unlike 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, only you wouldn't necessarily do that in real life.

The ten and y coordinates should be clear enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (half a circumvolve) in the beginning column and is increased by steps of 90 degrees, culminating in a consummate circle in the last column.

The argument for the clockwise parameter results in the first and 3rd row being drawn as clockwise arcs and the second and 4th row every bit counterclockwise arcs. Finally, the if statement makes the meridian half stroked arcs and the bottom half filled arcs.

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

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

                                  office                  depict                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  ten                  =                  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                  ;                  // End indicate 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 next type of paths bachelor are Bézier curves, available in both cubic and quadratic varieties. These are mostly used to describe circuitous organic shapes.

quadraticCurveTo(cp1x, cp1y, ten, y): Draws a quadratic Bézier bend from the current pen position to the end betoken specified past x and y, using the command point specified past cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bézier bend from the current pen position to the cease signal specified past x 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 start and an end point (blue dots) and just one control indicate (indicated by the red dot) while a cubic Bézier curve uses 2 control points.

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

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

There's nothing very difficult in these examples. In both cases we see a succession of curves existence drawn which finally result 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"                                        height                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  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                  (                  60                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

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

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

                                  function                  depict                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  fifty                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  xx                  ,                  25                  ,                  20                  ,                  62.v                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  xx                  ,                  fourscore                  ,                  twoscore                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  eighty                  ,                  130                  ,                  62.five                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.v                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  twoscore                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

Rectangles

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

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

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

Making combinations

So far, each example on this folio has used merely one type of path function per shape. However, in that location's no limitation to the number or types of paths you can apply to create a shape. And then in this final example, permit'southward combine all of the path functions to brand a set up of very famous game characters.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  15                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  xix                  ,                  150                  ,                  150                  ,                  ix                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  x                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  16                  ,                  vi                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  10                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  7                  ,                  simulated                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  make full                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  eight                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  sixteen                  ,                  35                  ,                  iv                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  6                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  viii                  ;                  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                  (                  )                  ;                  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                  *                  ii                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  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.                  function                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    meridian,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  superlative,                  x                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (ten                  +                  width,                  y                  +                  tiptop,                  x                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  10                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks like this:

We won't go over this in detail, since it's actually surprisingly unproblematic. The most important things to note are the use of the fillStyle property on the cartoon context, and the use of a utility role (in this case roundedRect()). Using utility functions for $.25 of cartoon you exercise ofttimes can be very helpful and reduce the amount of code you lot need, likewise as its complexity.

We'll have some other look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using information technology to change the fill color for paths from the default color of black to white, and then back again.

Path2D objects

Every bit nosotros accept seen in the final example, at that place can be a series of paths and cartoon commands to describe objects onto your sail. To simplify the lawmaking and to improve performance, the Path2D object, available in recent versions of browsers, lets you cache or record these cartoon commands. You lot are able to play back your paths apace. Let's see 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 copy), or optionally with a string consisting of SVG path data.

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

All path methods like moveTo, rect, arc or quadraticCurveTo, etc., which nosotros got to know in a higher place, are available on Path2D objects.

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

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

Path2D example

In this case, we are creating a rectangle and a circumvolve. Both are stored equally a Path2D object, so that they are bachelor for after usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the current path. Here, stroke and make full are used with a path argument to describe both objects onto the sheet, for example.

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

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

Using SVG paths

Some other powerful feature of the new sheet Path2D API is using SVG path data to initialize paths on your canvas. This might allow you to pass around path data and re-utilize them in both, SVG and canvas.

The path will movement to betoken (M10 10) then move horizontally fourscore points to the right (h 80), then lxxx points down (v lxxx), and so 80 points to the left (h -eighty), and then back to the start (z). You tin see this example on the Path2D constructor folio.

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

« Previous
Next »

abramsappich.blogspot.com

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

Abrams Appich