Canvas Draw Circle Fill Color

Drawing shapes with canvas

« Previous
Next »

Now that we accept fix up our sheet environment, nosotros can become into the details of how to draw on the canvas. Past the cease of this commodity, you will have 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 canvas and we will encounter how that can be done.

The grid

Before we tin start cartoon, nosotros need to talk about the canvas grid or coordinate space. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high.

Usually ane unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. And so the position of the peak left corner of the blue foursquare becomes x pixels from the left and y pixels from the superlative, at coordinate (x,y). Later in this tutorial we'll see how we can interpret the origin to a different position, rotate the grid and even scale information technology, but for at present we'll stick to the default.

Drawing rectangles

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

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

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

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

Below is the depict() function from the previous page, but now it is making use of these 3 functions.

Rectangular shape instance

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

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

This case's 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 foursquare from the center, and and so strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared foursquare.

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

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

Drawing paths

Now let'southward look at paths. A path is a listing 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, can be airtight. To make shapes using paths, we take some extra steps:

First, you lot create the path.
Then y'all use drawing commands to draw into the path.
One time the path has been created, you lot tin can stroke or fill the path to return it.

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 straight line to the path, going to the kickoff of the electric current sub-path.
stroke(): Draws the shape by stroking its outline.
fill(): Draws a solid shape past filling the path's content area.

The first 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 nosotros tin can start drawing new shapes.

Note: When the electric current path is empty, such as immediately afterwards calling beginPath(), or on a newly created canvas, the first path construction command is always treated as a moveTo(), regardless of what information technology actually is. For that reason, you lot will nearly ever want to specifically gear up your starting position after resetting a path.

The second pace is calling the methods that really specify the paths to be drawn. We'll see these presently.

The tertiary, and an optional step, is to phone call closePath(). This method tries to close the shape by drawing a direct line from the electric current signal to the kickoff. If the shape has already been airtight or in that location'southward only ane indicate in the list, this function does nothing.

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

Cartoon a triangle

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

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

                                  part                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  l                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  75                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  25                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

The event looks like this:

Moving the pen

One very useful part, which doesn't really depict anything but becomes function of the path list described in a higher place, is the moveTo() part. You lot tin probably best think of this as lifting a pen or pencil from i spot on a slice of newspaper and placing it on the next.

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

When the sheet is initialized or beginPath() is called, you typically will desire to use the moveTo() role to place the starting point somewhere else. We could likewise use moveTo() to describe unconnected paths. Accept a look at the smiley face beneath.

To try this for yourself, you can utilize the code snippet below. Just paste it into the draw() function we saw before.

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

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

The event looks like this:

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

Annotation: To larn more about the arc() function, run across the Arcs department beneath.

Lines

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

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

This method takes ii arguments, x and y, which are the coordinates of the line's end point. The starting point is dependent on previously drawn paths, where the stop signal of the previous path is the starting bespeak for the following, etc. The starting indicate can also be changed by using the moveTo() method.

The instance below draws ii triangles, one filled and one outlined.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.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 by calling beginPath() to start a new shape path. Nosotros then use the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.

You'll notice the difference 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 nosotros left out the closePath() for the stroked triangle, only two lines would accept been drawn, not a complete triangle.

Arcs

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

arc(x, y, radius, startAngle, endAngle, counterclockwise): Draws an arc which is centered at (x, y) position with radius r starting at startAngle and catastrophe 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 command points and radius, continued to the previous signal by a straight line.

Allow'due south take a more detailed look at the arc method, which takes half-dozen parameters: x and y are the coordinates of the center of the circle on which the arc should exist drawn. radius is self-explanatory. The startAngle and endAngle parameters ascertain the start and end points of the arc in radians, along the bend of the circle. These are measured from the x axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

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

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

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

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

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

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

                                  role                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  l                  ;                  // ten coordinate                  var                  y                  =                  25                  +                  i                  *                  l                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting signal on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // Stop bespeak on circle                  var                  counterclockwise                  =                  i                  %                  two                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  fill up                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

quadraticCurveTo(cp1x, cp1y, 10, y): Draws a quadratic Bézier bend from the current pen position to the finish bespeak specified by x and y, using the control indicate 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 end 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 start and an finish point (bluish dots) and just one control point (indicated past the red dot) while a cubic Bézier bend uses two control points.

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

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

There's nothing very difficult in these examples. In both cases nosotros see a succession of curves existence drawn which finally consequence in a consummate shape.

Quadratic Bezier curves

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

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

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

Cubic Bezier curves

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

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

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

Rectangles

In addition to the three methods we saw in Drawing rectangles, which draw rectangular shapes straight to the canvas, in that location'south also the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

And then far, each example on this folio has used but i type of path function per shape. However, at that place's no limitation to the number or types of paths you can utilise to create a shape. So in this final example, let's combine all of the path functions to make a fix of very famous game characters.

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

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

The resulting paradigm looks similar this:

We won't go over this in particular, since it's actually surprisingly simple. The most of import things to note are the use of the fillStyle belongings on the drawing context, and the use of a utility role (in this case roundedRect()). Using utility functions for $.25 of drawing you do often tin be very helpful and reduce the corporeality of code you need, also every bit its complication.

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

Path2D objects

Equally we have seen in the last example, there tin be a series of paths and drawing commands to draw objects onto your canvass. To simplify the code and to meliorate operation, the Path2D object, bachelor in contempo versions of browsers, lets you cache or tape these cartoon commands. You are able to play back your paths rapidly. Let's see how we tin can construct a Path2D object:

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

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

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

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

Path2D case

In this instance, we are creating a rectangle and a circle. Both are stored as a Path2D object, and then that they are available for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the current path. Here, stroke and fill are used with a path argument to describe both objects onto the sail, for example.

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

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

Using SVG paths

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

The path will move to signal (M10 10) and and so move horizontally 80 points to the correct (h 80), then fourscore points down (v 80), then lxxx points to the left (h -80), so back to the starting time (z). You tin encounter this instance on the Path2D constructor page.

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

« Previous
Next »

norrisaisce2001.blogspot.com

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