Draw a Circle in Java 12

Drawing shapes with canvas

« Previous
Next »

Now that nosotros accept set our canvas environs, we can go into the details of how to depict on the sail. Past the end of this article, yous will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvas and we will see how that can be done.

The grid

Before we can start drawing, we need to talk about the canvas filigree or coordinate infinite. Our HTML skeleton from the previous page had a sheet element 150 pixels wide and 150 pixels loftier.

Ordinarily 1 unit of measurement 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. Then the position of the height left corner of the blue foursquare becomes x pixels from the left and y pixels from the top, at coordinate (ten,y). Subsequently in this tutorial we'll see how nosotros can interpret the origin to a dissimilar position, rotate the grid and even calibration it, only for now we'll stick to the default.

Drawing rectangles

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

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

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

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

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

Rectangular shape example

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

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

This case's output is shown beneath.

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

In upcoming pages we'll run into 2 alternative methods for clearRect(), and we'll also see how to change the color and stroke manner of the rendered shapes.

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

Drawing paths

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

First, you create the path.
So yous utilize drawing commands to draw into the path.
Once the path has been created, you lot can stroke or fill the path to return it.

Here are the functions used to perform these steps:

beginPath(): Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up.
Path methods: Methods to prepare different paths for objects.
closePath(): Adds a direct line to the path, going to the showtime of the electric 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 equally a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we tin can commencement drawing new shapes.

Notation: When the electric current path is empty, such as immediately after calling beginPath(), or on a newly created canvass, the first path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, y'all will almost always want to specifically set your starting position after resetting a path.

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

The third, and an optional step, is to call closePath(). This method tries to shut the shape by drawing a straight line from the current point to the beginning. If the shape has already been closed or there'south merely one indicate in the list, this function does zippo.

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

Cartoon a triangle

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

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

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

The result looks like this:

Moving the pen

One very useful function, which doesn't actually draw anything merely becomes part of the path list described above, is the moveTo() function. Yous can probably best think of this as lifting a pen or pencil from one spot on a piece of newspaper and placing it on the adjacent.

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

When the canvas is initialized or beginPath() is called, y'all typically volition want to use the moveTo() function to place the starting point somewhere else. Nosotros could also employ moveTo() to draw unconnected paths. Take a look at the smiley confront beneath.

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

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

                                  office                  depict                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  fifty                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Oral cavity (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  sixty                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  ninety                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

If you'd like to run into the connecting lines, yous can remove the lines that phone call moveTo().

Annotation: To acquire more about the arc() office, see the Arcs section below.

Lines

For cartoon straight lines, use 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 two arguments, ten and y, which are the coordinates of the line's stop point. The starting betoken is dependent on previously drawn paths, where the end point of the previous path is the starting betoken for the following, etc. The starting bespeak can also be inverse by using the moveTo() method.

The example below draws two triangles, 1 filled and ane outlined.

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

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

This starts past calling beginPath() to start a new shape path. We so utilize the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make upwards two sides of the triangle.

You'll notice the divergence between the filled and stroked triangle. This is, every bit mentioned above, considering shapes are automatically closed when a path is filled, simply not when they are stroked. If nosotros left out the closePath() for the stroked triangle, simply 2 lines would have been drawn, not a complete triangle.

Arcs

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

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

Allow's have a more than detailed look 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 stop points of the arc in radians, along the curve of the circle. These are measured from the ten axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you tin can apply the following 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 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, we showtime a new path past calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, merely you wouldn't necessarily do that in real life.

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

The statement for the clockwise parameter results in the showtime and tertiary row beingness fatigued equally clockwise arcs and the second and fourth row equally counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the bottom half filled arcs.

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

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

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

Bezier and quadratic curves

The adjacent type 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, ten, y): Draws a quadratic Bézier bend from the electric current pen position to the end signal specified past ten and y, using the control bespeak specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 10, y): Draws a cubic Bézier curve from the electric current pen position to the finish point specified by ten and y, using the command points specified by (cp1x, cp1y) and (cp2x, cp2y).

The difference betwixt these is that a quadratic Bézier curve has a start and an stop point (bluish dots) and but i command point (indicated by 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 terminate point. cp1x and cp1y are the coordinates of the beginning control indicate, and cp2x and cp2y are the coordinates of the 2nd command point.

Using quadratic and cubic Bézier curves can exist quite challenging, because dissimilar vector drawing software like Adobe Illustrator, nosotros don't have straight visual feedback equally to what we're doing. This makes it pretty hard to draw complex shapes. In the following case, we'll be drawing some unproblematic organic shapes, merely if y'all accept the fourth dimension and, most of all, the patience, much more complex shapes can exist created.

There'southward nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally outcome in a complete shape.

Quadratic Bezier curves

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

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.five                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  fifty                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  fifty                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  60                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

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

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

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

Rectangles

In addition to the iii methods we saw in Drawing rectangles, which describe rectangular shapes directly to the canvas, at that place's as well the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

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

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

                                  function                  depict                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  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                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  16                  ,                  6                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  10                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  vii                  ,                  false                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  35                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  6                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  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                  (                  )                  ;                  ctx.fillStyle                  =                  'blackness'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  two                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility function to draw a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  superlative,                  x                  +                  radius,                  y                  +                  summit,                  radius)                  ;                  ctx.                  arcTo                  (ten                  +                  width,                  y                  +                  height,                  x                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  10                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks similar this:

We won't go over this in detail, since it's actually surprisingly elementary. The nigh important things to note are the use of the fillStyle holding on the drawing context, and the utilize of a utility role (in this case roundedRect()). Using utility functions for bits of cartoon yous do oftentimes tin can exist very helpful and reduce the amount of code you need, every bit well every bit its complexity.

We'll take another expect at fillStyle, in more item, later in this tutorial. Hither, all we're doing is using it to change the fill colour for paths from the default color of black to white, and and so dorsum again.

Path2D objects

As we accept seen in the last example, at that place can exist a serial of paths and cartoon commands to depict objects onto your sail. To simplify the lawmaking and to improve performance, the Path2D object, available in contempo versions of browsers, lets you enshroud or tape these drawing commands. Yous are able to play back your paths quickly. Let's come across how we tin 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 data.

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

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

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

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

Path2D example

In this example, nosotros are creating a rectangle and a circle. Both are stored equally 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 utilize instead of the current path. Here, stroke and fill are used with a path argument to draw both objects onto the canvas, for example.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <sail                    id                                          =                      "canvas"                                        width                                          =                      "130"                                        meridian                                          =                      "100"                                        >                                                                              </sail                    >                                                                              </body                    >                                                                              </html                    >

                                  office                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  ten                  ,                  ten                  ,                  50                  ,                  50                  )                  ;                  var                  circle                  =                  new                  Path2D                  (                  )                  ;                  circle.                  arc                  (                  100                  ,                  35                  ,                  25                  ,                  0                  ,                  2                  *                  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 canvass. This might permit you to pass around path information and re-use them in both, SVG and canvas.

The path will move to signal (M10 ten) so move horizontally 80 points to the right (h fourscore), so fourscore points downwards (v 80), then 80 points to the left (h -eighty), and then back to the showtime (z). You tin see this case on the Path2D constructor page.

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

« Previous
Next »

gordonfrou1999.blogspot.com

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