Draw a Filled in Circle in Html Canvas

April 09, 2022 Post a Comment

Drawing shapes with sail

« Previous
Side by side »

Now that we have ready our canvas environment, we can get into the details of how to draw on the canvass. By the end of this article, y'all 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 drawing objects onto the canvas and we volition see how that can be washed.

The grid

Earlier we tin can kickoff drawing, we need to talk virtually the canvas grid or coordinate infinite. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high.

Unremarkably ane unit in the grid corresponds to i 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 ten pixels from the left and y pixels from the top, at coordinate (x,y). Afterward in this tutorial we'll see how nosotros can translate the origin to a different position, rotate the grid and even calibration it, but for now we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> only supports ii primitive shapes: rectangles and paths (lists of points connected past lines). All other shapes must exist created by combining one or more than paths. Luckily, we have an assortment of path drawing functions which get in possible to compose very complex shapes.

Get-go allow'southward look at the rectangle. In that location are iii functions that draw rectangles on the sail:

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

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

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

Rectangular shape example

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

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

This example'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 eye, and then 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 as well come across how to change the colour and stroke style of the rendered shapes.

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

Drawing paths

Now permit's wait at paths. A path is a list of points, connected by segments of lines that tin can be of different shapes, curved or not, of different width and of different colour. A path, or even a subpath, can be closed. To make shapes using paths, we take some extra steps:

First, y'all create the path.
So y'all use cartoon commands to draw into the path.
Once the path has been created, you 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 drawing commands are directed into the path and used to build the path upward.
Path methods: Methods to set different paths for objects.
closePath(): Adds a straight line to the path, going to the starting time of the electric current sub-path.
stroke(): Draws the shape by stroking its outline.
fill(): Draws a solid shape by filling the path'southward 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 class a shape. Every time this method is chosen, the list is reset and we tin start drawing new shapes.

Notation: When the current path is empty, such equally immediately afterwards calling beginPath(), or on a newly created canvas, the offset path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, you will most always desire to specifically gear up your starting position after resetting a path.

The second step is calling the methods that actually specify the paths to exist fatigued. Nosotros'll see these shortly.

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

Annotation: When you call fill(), any open shapes are airtight automatically, so yous don't accept to telephone call closePath(). This is not the case when you phone call stroke().

Cartoon a triangle

For case, the lawmaking for drawing a triangle would await something like this:

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

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

The outcome looks like this:

Moving the pen

One very useful part, which doesn't actually describe anything but becomes part of the path list described higher up, is the moveTo() part. You tin probably all-time think of this as lifting a pen or pencil from 1 spot on a piece of newspaper and placing it on the next.

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

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

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

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

                                  function                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.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                  ,                  false                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left middle                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The event looks similar this:

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

Notation: To larn more about the arc() function, see the Arcs section beneath.

Lines

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

lineTo(x, y): Draws a line from the current drawing position to the position specified past 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 drawn paths, where the end betoken of the previous path is the starting betoken for the post-obit, etc. The starting point can besides be changed by using the moveTo() method.

The instance beneath draws ii triangles, 1 filled and one outlined.

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

                                  office                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  'second'                  )                  ;                  // 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 outset a new shape path. We then use the moveTo() method to move the starting point to the desired position. Beneath this, two lines are fatigued which make up two sides of the triangle.

You'll notice the difference betwixt the filled and stroked triangle. This is, as mentioned in a higher place, considering shapes are automatically airtight when a path is filled, only non when they are stroked. If nosotros left out the closePath() for the stroked triangle, merely two lines would have been drawn, not a complete triangle.

Arcs

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

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

Let'southward have a more detailed look at the arc method, which takes half-dozen 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 get-go and end points of the arc in radians, forth the curve 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.

Annotation: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians yous tin utilize the post-obit JavaScript expression: radians = (Math.PI/180)*degrees.

The post-obit case is a picayune more circuitous than the ones we've seen in a higher place. 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, nosotros start a new path by calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily practice that in existent life.

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

The statement for the clockwise parameter results in the first and third row existence fatigued as clockwise arcs and the second and 4th row as counterclockwise arcs. Finally, the if statement makes the elevation half stroked arcs and the bottom half filled arcs.

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

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

                                  part                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2nd'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  ten                  =                  25                  +                  j                  *                  50                  ;                  // 10 coordinate                  var                  y                  =                  25                  +                  i                  *                  fifty                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circumvolve                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // End point on circumvolve                  var                  counterclockwise                  =                  i                  %                  two                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  i                  )                  {                  ctx.                  fill                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

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

The deviation between these is that a quadratic Bézier curve has a start and an finish point (blueish dots) and just ane control point (indicated by the reddish dot) while a cubic Bézier curve uses two control points.

The 10 and y parameters in both of these methods are the coordinates of the cease point. cp1x and cp1y are the coordinates of the offset control point, and cp2x and cp2y are the coordinates of the second control signal.

Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, nosotros don't take direct visual feedback as to what we're doing. This makes it pretty hard to draw circuitous shapes. In the following example, we'll be drawing some uncomplicated organic shapes, but if you lot have the fourth dimension and, about of all, the patience, much more than circuitous shapes can be created.

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

Quadratic Bezier curves

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

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

                                  function                  draw                  (                  )                  {                  var                  canvass                  =                  certificate.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.five                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  fifty                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  50                  ,                  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                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "sheet"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </sheet                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  xl                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  20                  ,                  62.5                  ,                  20                  ,                  62.five                  )                  ;                  ctx.                  bezierCurveTo                  (                  xx                  ,                  80                  ,                  40                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  lxxx                  ,                  130                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.v                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  twoscore                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

Rectangles

In add-on to the three methods nosotros saw in Cartoon rectangles, which draw rectangular shapes directly to the canvas, at that place'south as well the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

So far, each example on this folio has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final instance, allow'due south combine all of the path functions to brand a set of very famous game characters.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  fifteen                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  19                  ,                  150                  ,                  150                  ,                  nine                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  16                  ,                  half dozen                  )                  ;                  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                  ,                  false                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  viii                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  35                  ,                  iv                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  6                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  four                  ,                  iv                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  sixteen                  ,                  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                  *                  2                  ,                  truthful                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility role to describe a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    10,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (ten,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  height,                  x                  +                  radius,                  y                  +                  acme,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  height,                  ten                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  x                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting prototype looks like this:

Nosotros won't become over this in detail, since it's really surprisingly simple. The most important things to note are the apply of the fillStyle holding on the cartoon context, and the employ of a utility function (in this instance roundedRect()). Using utility functions for bits of drawing you practise often can be very helpful and reduce the amount of code you need, too as its complexity.

We'll accept another look at fillStyle, in more than detail, afterwards 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 and so back again.

Path2D objects

As we have seen in the last example, at that place can exist a series of paths and cartoon commands to draw objects onto your sheet. To simplify the code and to amend performance, the Path2D object, available in recent versions of browsers, lets you cache or record these drawing commands. Y'all are able to play back your paths quickly. Permit'southward see how we tin construct a Path2D object:

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

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

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

The Path2D API also adds a way to combine paths using the addPath method. This can exist useful when y'all want 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 instance

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

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

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

Using SVG paths

Another 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-utilise them in both, SVG and canvas.

The path will motion to point (M10 10) then movement horizontally 80 points to the right (h 80), then eighty points down (v 80), and then fourscore points to the left (h -80), and and then back to the start (z). Y'all tin run into this instance on the Path2D constructor page.

                                  var                  p                  =                  new                  Path2D                  (                  'M10 10 h eighty five fourscore h -eighty Z'                  )                  ;

« Previous
Next »

mccrayforit2001.blogspot.com

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

McCray Forit2001