Html Canvas Draw Circle Filled

Drawing shapes with canvas

« Previous
Adjacent »

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

The grid

Before nosotros can showtime cartoon, nosotros need to talk nearly the sail filigree or coordinate space. Our HTML skeleton from the previous page had a canvas chemical element 150 pixels wide and 150 pixels high.

Unremarkably i unit in the filigree corresponds to 1 pixel on the canvas. The origin of this filigree is positioned in the elevation left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the peak left corner of the bluish square becomes ten pixels from the left and y pixels from the elevation, at coordinate (x,y). Later in this tutorial we'll encounter how we can translate the origin to a different position, rotate the grid and even scale it, simply for now we'll stick to the default.

Cartoon rectangles

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

First allow'south expect at the rectangle. There are three functions that depict rectangles on the sheet:

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

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

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

Rectangular shape example

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  60                  ,                  60                  )                  ;                  ctx.                  strokeRect                  (                  50                  ,                  50                  ,                  50                  ,                  50                  )                  ;                  }                  }

This example's output is shown below.

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

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

Dissimilar the path functions we'll see in the next section, all three rectangle functions draw immediately to the canvas.

Drawing paths

Now permit'due south wait 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 be closed. To make shapes using paths, we take some extra steps:

Showtime, y'all create the path.
So you employ drawing commands to depict into the path.
One time the path has been created, you can stroke or fill up the path to return information technology.

Hither are the functions used to perform these steps:

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

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

Note: When the electric current path is empty, such as immediately afterward calling beginPath(), or on a newly created canvas, the start 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 subsequently resetting a path.

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

The third, and an optional step, is to call closePath(). This method tries to close the shape past cartoon a directly line from the current signal to the start. If the shape has already been closed or there's only one point in the list, this function does cipher.

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

Cartoon a triangle

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

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

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

The event looks like this:

Moving the pen

I very useful function, which doesn't actually depict anything but becomes office of the path list described above, is the moveTo() part. Y'all can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing information technology on the next.

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

When the canvass is initialized or beginPath() is called, you typically volition desire to utilize the moveTo() function to identify the starting point somewhere else. We could too use moveTo() to draw unconnected paths. Take a look at the smiley face below.

To try this for yourself, you lot can apply the code snippet below. Simply paste it into the draw() function we saw earlier.

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  faux                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  five                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  // Right centre                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

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

Note: To learn more nearly the arc() function, see the Arcs section beneath.

Lines

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

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

This method takes two arguments, x and y, which are the coordinates of the line'southward end indicate. The starting signal is dependent on previously drawn paths, where the terminate signal of the previous path is the starting point for the post-obit, etc. The starting point can also exist inverse by using the moveTo() method.

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

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

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

This starts past calling beginPath() to start a new shape path. Nosotros then utilize the moveTo() method to motility the starting indicate to the desired position. Beneath this, two lines are drawn which brand up two sides of the triangle.

Yous'll discover the departure between the filled and stroked triangle. This is, every bit 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, but 2 lines would have been drawn, non a complete triangle.

Arcs

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

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

Allow's have a more detailed wait at the arc method, which takes six parameters: x and y are the coordinates of the heart of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the start and end 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 truthful, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

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

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

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

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

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

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

                                  office                  draw                  (                  )                  {                  var                  sheet                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  three                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  10                  =                  25                  +                  j                  *                  l                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  50                  ;                  // y coordinate                  var                  radius                  =                  xx                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // Stop point on circle                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  make full                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

quadraticCurveTo(cp1x, cp1y, ten, y): Draws a quadratic Bézier bend from the electric current pen position to the end signal specified by x and y, using the control point specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bézier curve from the current pen position to the finish point specified by x 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 offset and an end bespeak (blue dots) and just one command point (indicated by the red dot) while a cubic Bézier bend uses ii control points.

The ten and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the starting time command point, and cp2x and cp2y are the coordinates of the 2d control indicate.

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

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

Quadratic Bezier curves

This example uses multiple quadratic Bézier curves to return a spoken language balloon.

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

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

Cubic Bezier curves

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  'second'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  seventy                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  20                  ,                  62.five                  ,                  20                  ,                  62.five                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  eighty                  ,                  40                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  80                  ,                  130                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.5                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  40                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  }                  }

Rectangles

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

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

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

Making combinations

So far, each example on this page has used only 1 type of path function per shape. However, there'southward no limitation to the number or types of paths you lot can use to create a shape. So in this final example, let's combine all of the path functions to make a set up of very famous game characters.

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

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

The resulting image looks like this:

We won't go over this in detail, since it's actually surprisingly uncomplicated. The most important things to notation are the employ of the fillStyle property on the cartoon context, and the utilize of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do ofttimes can exist very helpful and reduce the amount of lawmaking you demand, besides every bit its complexity.

We'll have another expect at fillStyle, in more than detail, afterward in this tutorial. Here, all we're doing is using information technology to change the fill color for paths from the default colour of black to white, and then back over again.

Path2D objects

Equally we take seen in the last instance, there can be a serial of paths and drawing commands to depict objects onto your canvass. To simplify the code and to improve performance, the Path2D object, available in recent versions of browsers, lets you lot cache or record these drawing commands. You are able to play back your paths quickly. Permit's run into how we can construct a Path2D object:

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

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // re-create from some other 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 in a higher place, are available on Path2D objects.

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

Path2D.addPath(path [, transform]): Adds a path to the electric 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 employ instead of the current path. Here, stroke and make full are used with a path argument to draw both objects onto the canvass, for case.

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

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

Using SVG paths

Some other powerful feature of the new canvass Path2D API is using SVG path data to initialize paths on your canvas. This might allow y'all to laissez passer around path data and re-use them in both, SVG and canvas.

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

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

« Previous
Next »

metzgermelm1939.blogspot.com

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