Javascript Canvas Draw Filled Circle

Drawing shapes with sail

« Previous
Next »

Now that nosotros have set upward our canvas environs, we tin get into the details of how to draw on the canvas. By the terminate 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 be washed.

The filigree

Earlier we tin can showtime cartoon, we demand to talk virtually the canvas grid or coordinate space. Our HTML skeleton from the previous folio had a canvas element 150 pixels broad and 150 pixels high.

Commonly 1 unit in the grid corresponds to 1 pixel on the canvass. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the pinnacle left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Afterwards in this tutorial nosotros'll see how we tin can interpret the origin to a different position, rotate the filigree and even scale it, but for at present we'll stick to the default.

Cartoon rectangles

Unlike SVG, <canvas> only supports 2 primitive shapes: rectangles and paths (lists of points connected past lines). All other shapes must be created by combining one or more than paths. Luckily, we have an array of path drawing functions which brand it possible to etch very circuitous shapes.

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

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

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

Beneath is the draw() function from the previous page, but now it is making use of these iii functions.

Rectangular shape example

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

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

This example'southward 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 so strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared square.

In upcoming pages we'll meet two alternative methods for clearRect(), and nosotros'll also encounter how to modify the colour and stroke mode of the rendered shapes.

Unlike the path functions we'll run across in the adjacent section, all three rectangle functions describe immediately to the sheet.

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 different width and of different color. A path, or even a subpath, tin can be airtight. To make shapes using paths, we take some extra steps:

First, you create the path.
And then you use drawing commands to draw into the path.
In one case the path has been created, y'all tin can stroke or fill the path to render information technology.

Hither are the functions used to perform these steps:

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

The first stride to create a path is to phone call the beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together class a shape. Every fourth dimension this method is called, the list is reset and we tin can beginning drawing new shapes.

Note: When the current path is empty, such equally immediately afterwards calling beginPath(), or on a newly created sheet, the first path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, you volition almost always want to specifically prepare your starting position after resetting a path.

The second footstep is calling the methods that actually specify the paths to be drawn. We'll see these shortly.

The third, and an optional stride, is to call closePath(). This method tries to close the shape by cartoon a straight line from the electric current point to the get-go. If the shape has already been airtight or there's simply one point in the list, this function does nothing.

Note: When you call fill(), any open shapes are closed automatically, and then you don't accept to call closePath(). This is not the case when you phone call stroke().

Cartoon a triangle

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

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

                                  role                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  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

Ane very useful part, which doesn't actually draw anything just becomes part of the path list described above, is the moveTo() part. You lot can probably all-time think of this equally lifting a pen or pencil from i spot on a slice of paper and placing information technology on the next.

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

When the sheet is initialized or beginPath() is called, you typically volition want to use the moveTo() office to place the starting betoken somewhere else. We could also use moveTo() to draw unconnected paths. Take a look at the smiley face below.

To try this for yourself, you can use the code snippet below. Just paste it into the draw() function nosotros saw earlier.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  fifty                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  truthful                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  v                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  xc                  ,                  65                  ,                  v                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Right center                  ctx.                  stroke                  (                  )                  ;                  }                  }

The outcome looks like this:

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

Notation: To acquire more than about the arc() part, see the Arcs department below.

Lines

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

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

This method takes two arguments, x and y, which are the coordinates of the line'due south terminate point. The starting point is dependent on previously drawn paths, where the cease point of the previous path is the starting point for the following, etc. The starting point can as well be changed past using the moveTo() method.

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

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

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

This starts by calling beginPath() to first a new shape path. We then use the moveTo() method to motion the starting point to the desired position. Below this, two lines are fatigued which make upward two sides of the triangle.

You'll notice the departure between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, only two lines would have been drawn, non a complete triangle.

Arcs

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

arc(ten, y, radius, startAngle, endAngle, counterclockwise): Draws an arc which is centered at (ten, y) position with radius r starting at startAngle and 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 straight line.

Let's have a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the eye of the circumvolve on which the arc should be drawn. radius is cocky-explanatory. The startAngle and endAngle parameters define the outset and finish points of the arc in radians, along the curve of the circumvolve. These are measured from the 10 centrality. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

The following example is a fiddling more complex than the ones we've seen higher up. It draws 12 unlike arcs all with different angles and fills.

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

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

The statement for the clockwise parameter results in the start and third row being drawn as clockwise arcs and the 2nd and 4th row as counterclockwise arcs. Finally, the if statement makes the height half stroked arcs and the bottom half filled arcs.

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

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

                                  function                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  'second'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  50                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  fifty                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // End signal on circle                  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 bachelor are Bézier curves, available in both cubic and quadratic varieties. These are generally used to depict complex organic shapes.

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

The difference between these is that a quadratic Bézier curve has a beginning and an terminate signal (blue dots) and simply one control indicate (indicated past the red dot) while a cubic Bézier curve uses 2 control points.

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

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

There's zero very difficult in these examples. In both cases we see a succession of curves beingness drawn which finally result in a complete shape.

Quadratic Bezier curves

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

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.v                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  50                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  50                  ,                  120                  ,                  thirty                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  threescore                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.v                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

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

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

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

Rectangles

In addition to the 3 methods nosotros saw in Drawing rectangles, which draw rectangular shapes straight to the canvas, there's too the rect() method, which adds a rectangular path to a currently open up path.

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

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

Making combinations

Then far, each example on this folio has used but one blazon of path function per shape. Notwithstanding, there's no limitation to the number or types of paths yous can utilize to create a shape. So in this final example, let's combine all of the path functions to make a ready of very famous game characters.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  15                  )                  ;                  roundedRect                  (ctx,                  nineteen                  ,                  19                  ,                  150                  ,                  150                  ,                  9                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  x                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  sixteen                  ,                  6                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  x                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  7                  ,                  faux                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  sixteen                  ,                  35                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  vi                  ;                  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 up                  (                  )                  ;                  ctx.fillStyle                  =                  'white'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  91                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  88                  ,                  96                  ,                  87                  ,                  99                  ,                  87                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  87                  ,                  103                  ,                  88                  ,                  106                  ,                  91                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  94                  ,                  106                  ,                  95                  ,                  103                  ,                  95                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  95                  ,                  99                  ,                  94                  ,                  96                  ,                  91                  ,                  96                  )                  ;                  ctx.                  moveTo                  (                  103                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  100                  ,                  96                  ,                  99                  ,                  99                  ,                  99                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  99                  ,                  103                  ,                  100                  ,                  106                  ,                  103                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  106                  ,                  106                  ,                  107                  ,                  103                  ,                  107                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  107                  ,                  99                  ,                  106                  ,                  96                  ,                  103                  ,                  96                  )                  ;                  ctx.                  make full                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  ii                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  truthful                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility part to depict a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    10,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  height,                  x                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  summit,                  ten                  +                  width,                  y                  +                  tiptop                  -                  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 go over this in detail, since information technology's actually surprisingly simple. The nigh important things to notation are the utilise of the fillStyle belongings on the drawing context, and the use of a utility office (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you demand, equally well every bit its complexity.

We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all nosotros're doing is using information technology to alter the fill color for paths from the default color of black to white, and so back again.

Path2D objects

Every bit we have seen in the last example, in that location tin be a series of paths and drawing commands to draw objects onto your canvas. 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 are able to play back your paths quickly. Allow's see how nosotros tin construct a Path2D object:

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

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

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

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

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

Path2D example

In this example, we are creating a rectangle and a circle. Both are stored as a Path2D object, 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 current path. Here, stroke and fill are used with a path statement to depict both objects onto the canvas, for example.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  describe                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvas"                                        width                                          =                      "130"                                        summit                                          =                      "100"                                        >                                                                              </sheet                    >                                                                              </torso                    >                                                                              </html                    >

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

Using SVG paths

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

The path will move to signal (M10 10) and and so move horizontally 80 points to the right (h 80), then 80 points down (v 80), then 80 points to the left (h -80), and so dorsum to the outset (z). You can see this example on the Path2D constructor page.

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

« Previous
Next »

lusktheingly1992.blogspot.com

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