Draw Filled Circle Html Canvas

Cartoon shapes with sail

« Previous
Next »

At present that nosotros have ready upwards our sheet surroundings, we can become into the details of how to draw on the canvass. Past the end of this article, you lot will take learned how to depict rectangles, triangles, lines, arcs and curves, providing familiarity with some of the bones shapes. Working with paths is essential when drawing objects onto the canvas and we will see how that can be washed.

The filigree

Before we tin start drawing, nosotros need to talk most the canvas filigree or coordinate space. Our HTML skeleton from the previous page had a canvas element 150 pixels broad and 150 pixels high.

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

Drawing rectangles

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

First permit'due south wait at the rectangle. There are three functions that draw rectangles on the canvas:

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

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

Below is the depict() part from the previous page, but now information technology is making use of these three functions.

Rectangular shape example

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  describe                          (                          )                          ;                                                "                                                              >                                                                              <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'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  60                  ,                  60                  )                  ;                  ctx.                  strokeRect                  (                  l                  ,                  50                  ,                  l                  ,                  50                  )                  ;                  }                  }

This example's output is shown below.

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

In upcoming pages we'll encounter two alternative methods for clearRect(), and nosotros'll also encounter how to change the color and stroke manner of the rendered shapes.

Dissimilar the path functions we'll see in the side by side section, all iii rectangle functions draw immediately to the canvas.

Cartoon paths

Now allow's look at paths. A path is a listing of points, connected by segments of lines that can be of dissimilar shapes, curved or not, of dissimilar width and of unlike color. A path, or even a subpath, tin can exist closed. To brand shapes using paths, we take some actress steps:

Offset, you lot create the path.
Then y'all use drawing commands to draw into the path.
Once the path has been created, you can stroke or fill the path to render it.

Hither are the functions used to perform these steps:

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

The get-go step to create a path is to call the beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every fourth dimension this method is called, the listing is reset and nosotros can start cartoon new shapes.

Note: When the electric current path is empty, such every bit immediately after calling beginPath(), or on a newly created canvas, the showtime path construction command is always treated as a moveTo(), regardless of what it really is. For that reason, you will about always want to specifically set your starting position later on resetting a path.

The 2nd step is calling the methods that actually specify the paths to be drawn. We'll run across these shortly.

The third, and an optional step, is to call closePath(). This method tries to shut the shape by cartoon a straight line from the current point to the first. If the shape has already been airtight or there's only 1 point in the listing, this function does nothing.

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

Drawing a triangle

For instance, the lawmaking for drawing a triangle would look something like this:

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  fifty                  )                  ;                  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 draw anything but becomes office of the path list described above, is the moveTo() function. You can probably best retrieve of this as lifting a pen or pencil from one spot on a piece of paper and placing information technology on the next.

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

When the sheet is initialized or beginPath() is called, you typically will desire to employ the moveTo() role to place the starting betoken somewhere else. We could also use moveTo() to draw unconnected paths. Take a expect at the smiley face below.

To endeavor this for yourself, yous can employ the lawmaking snippet below. Just paste it into the draw() function nosotros saw earlier.

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  fake                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Correct eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The upshot looks similar this:

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

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

Lines

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

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

This method takes 2 arguments, 10 and y, which are the coordinates of the line's stop point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. The starting indicate can as well exist changed by using the moveTo() method.

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

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

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

This starts past calling beginPath() to commencement a new shape path. Nosotros then apply the moveTo() method to move the starting point to the desired position. Below this, two lines are fatigued which brand upwardly two sides of the triangle.

You'll discover the difference between the filled and stroked triangle. This is, as mentioned higher up, considering shapes are automatically closed 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 employ the arc() or arcTo() methods.

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

Let'south have a more detailed look at the arc method, which takes six parameters: ten 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 outset and end points of the arc in radians, forth the curve of the circumvolve. These are measured from the x axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians y'all can use the post-obit JavaScript expression: radians = (Math.PI/180)*degrees.

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

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

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

The statement for the clockwise parameter results in the first and third row being drawn every bit clockwise arcs and the 2d and fourth row as counterclockwise arcs. Finally, the if statement makes the superlative one-half stroked arcs and the lesser half filled arcs.

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

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

                                  part                  draw                  (                  )                  {                  var                  canvass                  =                  certificate.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  iv                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  50                  ;                  // ten coordinate                  var                  y                  =                  25                  +                  i                  *                  50                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting indicate on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // End bespeak on circle                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (10,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  make full                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

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

The deviation between these is that a quadratic Bézier bend has a start and an terminate point (blueish dots) and just i control point (indicated past the red dot) while a cubic Bézier bend uses two control points.

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

Using quadratic and cubic Bézier curves can exist quite challenging, because unlike vector drawing software similar Adobe Illustrator, we don't take direct visual feedback equally to what we're doing. This makes it pretty difficult to draw complex shapes. In the following instance, we'll be cartoon some uncomplicated organic shapes, but if you have the fourth dimension and, well-nigh of all, the patience, much more circuitous shapes can be created.

In that location's nothing very difficult in these examples. In both cases we see a succession of curves being fatigued which finally upshot in a complete shape.

Quadratic Bezier curves

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  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                  ,                  fifty                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  fifty                  ,                  120                  ,                  thirty                  ,                  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 instance draws a heart using cubic Bézier curves.

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

                                  function                  draw                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2nd'                  )                  ;                  // Cubic curves case                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  fifty                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  twenty                  ,                  25                  ,                  20                  ,                  62.5                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  xx                  ,                  80                  ,                  40                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  lxxx                  ,                  130                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.5                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  40                  )                  ;                  ctx.                  make full                  (                  )                  ;                  }                  }

Rectangles

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

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

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

Making combinations

So far, each example on this page has used just one type of path office 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 example, let's combine all of the path functions to make a fix of very famous game characters.

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

                                  function                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  'second'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  xv                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  19                  ,                  150                  ,                  150                  ,                  ix                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  x                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  xvi                  ,                  6                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  10                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  thirteen                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  vii                  ,                  faux                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  make full                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  sixteen                  ,                  35                  ,                  four                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  6                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  four                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  sixteen                  ,                  99                  ,                  4                  ,                  iv                  )                  ;                  }                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  102                  )                  ;                  ctx.                  bezierCurveTo                  (                  83                  ,                  94                  ,                  89                  ,                  88                  ,                  97                  ,                  88                  )                  ;                  ctx.                  bezierCurveTo                  (                  105                  ,                  88                  ,                  111                  ,                  94                  ,                  111                  ,                  102                  )                  ;                  ctx.                  lineTo                  (                  111                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  106.333                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  101.666                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  97                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  92.333                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  87.666                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'white'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  91                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  88                  ,                  96                  ,                  87                  ,                  99                  ,                  87                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  87                  ,                  103                  ,                  88                  ,                  106                  ,                  91                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  94                  ,                  106                  ,                  95                  ,                  103                  ,                  95                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  95                  ,                  99                  ,                  94                  ,                  96                  ,                  91                  ,                  96                  )                  ;                  ctx.                  moveTo                  (                  103                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  100                  ,                  96                  ,                  99                  ,                  99                  ,                  99                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  99                  ,                  103                  ,                  100                  ,                  106                  ,                  103                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  106                  ,                  106                  ,                  107                  ,                  103                  ,                  107                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  107                  ,                  99                  ,                  106                  ,                  96                  ,                  103                  ,                  96                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility function to draw a rectangle with rounded corners.                  part                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  superlative,                  ten                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  height,                  x                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  ten                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (ten,                  y,                  10,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting paradigm looks similar this:

We won't go over this in detail, since it's really surprisingly simple. The about important things to note are the use of the fillStyle property on the drawing context, and the apply of a utility role (in this case roundedRect()). Using utility functions for bits of drawing you do often tin be very helpful and reduce the amount of code y'all need, besides as its complexity.

We'll take another expect at fillStyle, in more item, later in this tutorial. Here, all we're doing is using information technology to change the fill color for paths from the default colour of blackness to white, and then back once again.

Path2D objects

As we have seen in the final instance, there can be a series of paths and drawing commands to draw objects onto your canvas. 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. You lot are able to play dorsum your paths chop-chop. Let's see how nosotros can construct a Path2D object:

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

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // re-create 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 as well adds a way to combine paths using the addPath method. This can be useful when you lot want to build objects from several components, for instance.

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

Path2D case

In this case, 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 electric current path. Here, stroke and fill are used with a path argument to depict both objects onto the canvas, for case.

                                                                            <html                    >                                                                              <trunk                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvas"                                        width                                          =                      "130"                                        meridian                                          =                      "100"                                        >                                                                              </canvas                    >                                                                              </torso                    >                                                                              </html                    >

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

Using SVG paths

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

The path will move to indicate (M10 x) and then move horizontally 80 points to the right (h 80), then 80 points down (v 80), then 80 points to the left (h -80), and then back to the start (z). You can see this case on the Path2D constructor page.

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

« Previous
Next »

reynoldscoldid.blogspot.com

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