# Shape Functions

For ease of use, the context also supplies a number of functions for drawing shapes. Some of these just define the shape as a series of subpaths to be used with the `stroke()` and `fill()` functions.

## Arcs and Circles

Of these, we’ve already seen the `arc(x, y, radius, startAngle, endAngle)` function. It can be used to draw an arc, or when filled, a wedge - like a pie slice. When a `startAngle` of 0 and `endAngle` of `2 * Math.PI` is used, it instead draws a complete circle.

``````<canvas id="arc-example" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('arc-example');
var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'green';
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = 'purple';
ctx.arc(250, 100, 50, 0, Math.PI * 2);
ctx.fill();

ctx.beginPath();
ctx.moveTo(400, 100);
ctx.arc(400, 100, 50, Math.PI, Math.PI / 4);
ctx.stroke();
ctx.fill();
</script>``````

## Ellipse

There is also an `ellipse(x, y, radiusX, radiusY, startAngle, endAngle)` function. It works in a similar way, creating an ellipse centered on the point (`x`, `y`) with a horizontal radius of `radiusX` and a vertical radius of `radiusY`, and starting and ending angles of `startAngle` and `endAngle` (specified in radians). As with the `arc()` method, a `startAngle` of 0 and `endAngle` of `2 * Math.PI` creates a full ellipse.

## Rectangle

The `rect(x, y, width, height)` function draws a rectangle with upper left corner at `(x, y)` and dimensions `width` and `height`. In addition to the `rect()` function, there are some shorthand functions that also stroke or fill the rect without altering the current path.

The first of these is `fillRect(x, y, width, height)` which uses the same arguments as `rect()` and fills the resulting rectangle with the current fill style. We used this in the introduction .

The second is the `clearRect(x, y, width, height)` function, which fills the rect defined by the arguments with transparent black (`rgba(0,0,0,0)`), effectively erasing everything in that rectangle on the canvas.