Draw Circle on Canvas Javascript

Cartoon shapes with sheet

« Previous
Next »

Now that we accept gear up our canvas environs, we can get into the details of how to draw on the canvas. By the finish of this article, you will accept learned how to depict rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when cartoon objects onto the canvas and we will see how that can be done.

The grid

Before we tin can showtime cartoon, nosotros need to talk almost the canvas grid 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 one pixel on the canvas. The origin of this grid 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 peak, at coordinate (x,y). Later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale information technology, just for at present we'll stick to the default.

Drawing rectangles

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

Beginning let's await at the rectangle. There are three functions that depict rectangles on the canvas:

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

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

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

Rectangular shape example

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  threescore                  ,                  60                  )                  ;                  ctx.                  strokeRect                  (                  50                  ,                  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() role then erases a 60x60 pixel foursquare from the center, and so strokeRect() is called to create a rectangular outline 50x50 pixels inside the cleared foursquare.

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

Unlike the path functions nosotros'll run into 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 exist of unlike shapes, curved or not, of different width and of different color. A path, or fifty-fifty a subpath, can be closed. To make shapes using paths, we have some extra steps:

First, you create the path.
Then you use drawing commands to draw into the path.
Once the path has been created, you can stroke or fill up the path to return it.

Here are the functions used to perform these steps:

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

The offset stride to create a path is to call the beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together grade a shape. Every time this method is called, the list is reset and we can start cartoon new shapes.

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

The 2d step is calling the methods that actually specify the paths to be fatigued. We'll see these shortly.

The tertiary, and an optional stride, is to call closePath(). This method tries to close the shape by drawing a direct line from the current point to the start. If the shape has already been airtight or in that location's only ane point in the list, this part does cypher.

Note: When you lot telephone call fill(), any open shapes are closed automatically, and so yous don't have to call closePath(). This is non the instance when you telephone call stroke().

Drawing a triangle

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

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

                                  function                  describe                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  50                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  75                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  25                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

The result looks like this:

Moving the pen

One very useful part, which doesn't actually draw anything simply becomes part of the path list described above, is the moveTo() role. You can probably all-time call up of this every bit lifting a pen or pencil from 1 spot on a piece of paper and placing it on the adjacent.

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

When the sail is initialized or beginPath() is chosen, y'all typically will want to utilize the moveTo() part to place the starting point somewhere else. Nosotros could also utilize moveTo() to draw unconnected paths. Take a expect at the smiley face up below.

To try this for yourself, you can employ the code snippet below. Just paste it into the depict() function we saw earlier.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  l                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circumvolve                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  five                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  truthful                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Right heart                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

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

Note: To acquire more well-nigh the arc() part, see the Arcs section below.

Lines

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

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

This method takes two arguments, 10 and y, which are the coordinates of the line's end betoken. The starting point is dependent on previously drawn paths, where the terminate point of the previous path is the starting point for the following, etc. The starting betoken tin likewise be inverse by using the moveTo() method.

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

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

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

This starts by calling beginPath() to start a new shape path. We and then apply the moveTo() method to motility the starting bespeak to the desired position. Below this, two lines are drawn which make up ii sides of the triangle.

You'll discover the difference betwixt the filled and stroked triangle. This is, as mentioned to a higher place, because shapes are automatically closed when a path is filled, but not when they are stroked. If nosotros left out the closePath() for the stroked triangle, only two lines would take been drawn, not a consummate triangle.

Arcs

To describe arcs or circles, nosotros 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 signal by a direct line.

Let's accept a more detailed look at the arc method, which takes half-dozen parameters: x and y are the coordinates of the center of the circumvolve on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters ascertain the start and stop points of the arc in radians, along the curve of the circle. 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 office are measured in radians, non degrees. To convert degrees to radians yous can utilize the following JavaScript expression: radians = (Math.PI/180)*degrees.

The following instance is a footling more than complex than the ones we've seen above. It draws 12 different 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, but you wouldn't necessarily practice that in real life.

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

The statement for the clockwise parameter results in the first and third row existence drawn as clockwise arcs and the second and fourth row equally counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the bottom one-half filled arcs.

Note: This case requires a slightly larger sheet than the others on this folio: 150 x 200 pixels.

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

                                  office                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  three                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  l                  ;                  // ten coordinate                  var                  y                  =                  25                  +                  i                  *                  50                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // End indicate on circumvolve                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  i                  )                  {                  ctx.                  fill                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

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

The deviation between these is that a quadratic Bézier curve has a first and an end point (blue dots) and just one control bespeak (indicated past the red dot) while a cubic Bézier curve uses 2 control 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 first control betoken, and cp2x and cp2y are the coordinates of the second control indicate.

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

There's zilch very hard in these examples. In both cases we run into a succession of curves being drawn which finally upshot in a complete shape.

Quadratic Bezier curves

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

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

                                  part                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  50                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  fifty                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  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                    >                                                                              <torso                                          onload                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </trunk                    >                                                                              </html                    >

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

Rectangles

In add-on to the three methods we saw in Drawing rectangles, which draw rectangular shapes direct to the sail, there'south as well the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

So far, each example on this folio has used just one blazon of path role per shape. However, in that location's no limitation to the number or types of paths you lot can apply to create a shape. So in this last instance, let's combine all of the path functions to brand a set of very famous game characters.

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

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

The resulting image looks like this:

We won't get over this in detail, since it'due south actually surprisingly uncomplicated. The most important things to note are the use of the fillStyle property on the cartoon context, and the use of a utility function (in this case roundedRect()). Using utility functions for $.25 of cartoon you do often can be very helpful and reduce the amount of code you lot need, as well as its complexity.

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

Path2D objects

As we have seen in the last example, in that location can be a series of paths and drawing commands to depict objects onto your canvass. To simplify the code and to improve operation, the Path2D object, available in recent versions of browsers, lets yous enshroud or record these drawing commands. You lot are able to play back your paths quickly. Let'due south encounter how we 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 copy), or optionally with a string consisting of SVG path data.

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

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

The Path2D API also adds a way to combine paths using the addPath method. This tin be useful when you want to build objects from several components, for case.

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

Path2D example

In this case, we are creating a rectangle and a circle. Both are stored as a Path2D object, so that they are bachelor for afterwards usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to utilize instead of the current path. Hither, stroke and fill are used with a path argument to draw both objects onto the sheet, for example.

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

                                  function                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  10                  ,                  x                  ,                  l                  ,                  l                  )                  ;                  var                  circumvolve                  =                  new                  Path2D                  (                  )                  ;                  circumvolve.                  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 data to initialize paths on your sail. This might let you to pass effectually path data and re-use them in both, SVG and canvas.

The path will motion to point (M10 10) and then motion horizontally 80 points to the right (h lxxx), and so 80 points down (v eighty), then 80 points to the left (h -80), and then back to the commencement (z). You can run into this instance on the Path2D constructor page.

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

« Previous
Next »

williamswrinke1952.blogspot.com

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