Canvas Draw Circle With Fill

Drawing shapes with canvass

« Previous
Next »

At present that nosotros have set our canvas environment, we tin get into the details of how to draw on the sheet. By the end of this article, you will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvas and we will see how that can exist done.

The grid

Earlier we can start drawing, nosotros need to talk virtually the canvas filigree or coordinate space. Our HTML skeleton from the previous folio had a canvass element 150 pixels wide and 150 pixels high.

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

Cartoon rectangles

Unlike SVG, <canvas> merely supports 2 archaic shapes: rectangles and paths (lists of points connected by lines). All other shapes must be created by combining one or more paths. Luckily, we have an assortment of path drawing functions which make it possible to compose very complex shapes.

First let's expect at the rectangle. There are iii functions that draw rectangles on the canvass:

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

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

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

Rectangular shape example

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  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                  ,                  50                  ,                  50                  )                  ;                  }                  }

This case'due south output is shown below.

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

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

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

Drawing paths

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

First, y'all create the path.
Then you utilise drawing commands to depict into the path.
In one case the path has been created, you can stroke or make full the path to return it.

Hither are the functions used to perform these steps:

beginPath(): Creates a new path. Once created, time to come drawing commands are directed into the path and used to build the path up.
Path methods: Methods to ready different paths for objects.
closePath(): Adds a straight line to the path, going to the outset of the current sub-path.
stroke(): Draws the shape by stroking its outline.
fill(): Draws a solid shape by filling the path's content area.

The commencement pace to create a path is to phone call the beginPath(). Internally, paths are stored every bit a list of sub-paths (lines, arcs, etc) which together form a shape. Every fourth dimension this method is called, the list is reset and we can start drawing new shapes.

Note: When the current path is empty, such as immediately afterwards calling beginPath(), or on a newly created sail, the first path structure control is e'er treated every bit a moveTo(), regardless of what information technology really is. For that reason, y'all will almost always want to specifically set your starting position after resetting a path.

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

The third, and an optional step, is to call closePath(). This method tries to close the shape by drawing a directly line from the current signal to the start. If the shape has already been airtight or at that place's only one point in the list, this function does nothing.

Note: When y'all phone call fill up(), any open shapes are airtight automatically, so you don't accept to call closePath(). This is non the instance when y'all call stroke().

Cartoon a triangle

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

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

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

The result looks similar this:

Moving the pen

One very useful function, which doesn't actually draw anything just becomes part of the path list described higher up, is the moveTo() part. You tin probably best recall of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.

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

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

To endeavour this for yourself, you can use the code snippet below. Only paste information technology into the draw() function we saw earlier.

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

                                  function                  describe                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  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                  (                  threescore                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  five                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Right centre                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

If you lot'd like to run across the connecting lines, you tin can remove the lines that call moveTo().

Note: To learn more well-nigh the arc() function, run across the Arcs section below.

Lines

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

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

This method takes two arguments, x and y, which are the coordinates of the line'southward end betoken. 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 point can too be changed past using the moveTo() method.

The case beneath draws two triangles, one filled and i outlined.

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

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

This starts past calling beginPath() to showtime a new shape path. Nosotros so use the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make up ii sides of the triangle.

Yous'll notice the difference between the filled and stroked triangle. This is, equally mentioned above, considering shapes are automatically closed when a path is filled, merely non when they are stroked. If nosotros left out the closePath() for the stroked triangle, only two lines would have been drawn, not a complete triangle.

Arcs

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

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

Allow'south accept a more than detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be fatigued. radius is cocky-explanatory. The startAngle and endAngle parameters define the start 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.

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

The post-obit example is a fiddling more complex than the ones we've seen in a higher place. It draws 12 dissimilar arcs all with different angles and fills.

The ii for loops are for looping through the rows and columns of arcs. For each arc, we kickoff a new path by calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, simply you wouldn't necessarily exercise that in existent life.

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

The statement for the clockwise parameter results in the first and 3rd row beingness drawn as clockwise arcs and the 2nd and fourth row equally counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the bottom half filled arcs.

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

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

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

Bezier and quadratic curves

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

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

The difference betwixt these is that a quadratic Bézier bend has a start and an terminate bespeak (blue dots) and just 1 control bespeak (indicated by the red dot) while a cubic Bézier curve uses two command points.

The 10 and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the beginning command bespeak, and cp2x and cp2y are the coordinates of the second command point.

Using quadratic and cubic Bézier curves tin exist quite challenging, because different vector cartoon software similar Adobe Illustrator, we don't have directly visual feedback as to what we're doing. This makes information technology pretty hard to describe circuitous shapes. In the following example, we'll exist drawing some unproblematic organic shapes, but if y'all have the time and, about of all, the patience, much more complex shapes can be created.

There's nada very difficult in these examples. In both cases nosotros see a succession of curves being drawn which finally event in a consummate shape.

Quadratic Bezier curves

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

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves instance                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  l                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  fifty                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  60                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

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

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

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

Rectangles

In add-on to the three methods we saw in Drawing rectangles, which depict rectangular shapes directly to the sheet, there'due 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 superlative-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 electric current pen position is automatically reset to the default coordinates.

Making combinations

So far, each example on this page has used only one blazon of path function per shape. Even so, there'due south no limitation to the number or types of paths you tin can use to create a shape. So in this terminal example, permit's combine all of the path functions to brand a set up of very famous game characters.

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

                                  function                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  fifteen                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  19                  ,                  150                  ,                  150                  ,                  ix                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  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                  ,                  xiii                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  7                  ,                  fake                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  35                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  6                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  iv                  ,                  iv                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  99                  ,                  4                  ,                  4                  )                  ;                  }                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  102                  )                  ;                  ctx.                  bezierCurveTo                  (                  83                  ,                  94                  ,                  89                  ,                  88                  ,                  97                  ,                  88                  )                  ;                  ctx.                  bezierCurveTo                  (                  105                  ,                  88                  ,                  111                  ,                  94                  ,                  111                  ,                  102                  )                  ;                  ctx.                  lineTo                  (                  111                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  106.333                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  101.666                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  97                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  92.333                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  87.666                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'white'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  91                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  88                  ,                  96                  ,                  87                  ,                  99                  ,                  87                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  87                  ,                  103                  ,                  88                  ,                  106                  ,                  91                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  94                  ,                  106                  ,                  95                  ,                  103                  ,                  95                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  95                  ,                  99                  ,                  94                  ,                  96                  ,                  91                  ,                  96                  )                  ;                  ctx.                  moveTo                  (                  103                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  100                  ,                  96                  ,                  99                  ,                  99                  ,                  99                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  99                  ,                  103                  ,                  100                  ,                  106                  ,                  103                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  106                  ,                  106                  ,                  107                  ,                  103                  ,                  107                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  107                  ,                  99                  ,                  106                  ,                  96                  ,                  103                  ,                  96                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility function to describe a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    acme,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  elevation,                  10                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  height,                  ten                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  ten                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks similar this:

We won't go over this in detail, since it's really surprisingly simple. The almost important things to note are the use of the fillStyle property on the drawing context, and the use of a utility part (in this case roundedRect()). Using utility functions for $.25 of drawing you exercise often tin be very helpful and reduce the amount of code you lot need, also as its complication.

We'll take another look at fillStyle, in more than item, later in this tutorial. Here, all we're doing is using it to alter the fill color for paths from the default color of black to white, and then back again.

Path2D objects

As we accept seen in the last instance, there can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to better functioning, the Path2D object, available in recent versions of browsers, lets you cache or tape these cartoon commands. You lot are able to play back your paths rapidly. Let's see how we tin can construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with some other 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)                  ;                  // copy from another Path2D object                  new                  Path2D                  (d)                  ;                  // path from SVG path data

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

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

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

Path2D instance

In this case, we are creating a rectangle and a circle. Both are stored as a Path2D object, and so 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. Hither, stroke and fill up are used with a path argument to draw both objects onto the sail, for example.

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

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

Using SVG paths

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

The path will move to point (M10 ten) and and then move horizontally eighty points to the correct (h 80), and then fourscore points down (v 80), and then 80 points to the left (h -80), and and so back to the commencement (z). You lot tin can see this example on the Path2D constructor page.

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

« Previous
Adjacent »

baileyhics1967.blogspot.com

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