```
We also need a script that will generate whatever we want to do on the canvas. In this example, we'll generate a square and an arrow. How we generate them is not as important, we'll discuss it later.
```js
// Procedural Canvas generation
const canvas =
document.getElementById('tutorial');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
// This draws a rectangle
ctx.strokeRect(100, 100, 125, 125);
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
}
```
## Understanding the Canvas grid
Canvas coordinates space. Taken from [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#The_grid)
To better understand the material that we'll cover next, we need to talk about the canvas coordinate space.
Normally 1 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) with all elements placed relative to this origin.
So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y).
Canvas provides tools to translate the origin to a different position, rotate the grid and even scale it, but for now, we'll stick to the default.
## Drawing primitives
Canvas supports two primitives for drawing: rectangle and path. All other forms are derived from these two primitives.
### Rectangles
Rectangles draw either rectangles or squares,
[`fillRect(x, y, width, height)`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect)
Draws a filled rectangle.
[`strokeRect(x, y, width, height)`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect)
Draws a rectangular outline.
[`clearRect(x, y, width, height)`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect)
Clears the specified rectangular area, making it fully transparent.
## Paths
Now let's look at paths. A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of a different color. A path, or even a subpath, can be closed. To make shapes using paths takes some extra steps:
- First, you create the path
- Then you use drawing commands to draw into the path
- Once the path has been created, you can stroke or fill the path to render it.
Here are the functions used to perform these steps:
[`beginPath()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath)
Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up.
[`closePath()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath)
Adds a straight line to the path, going to the start of the current sub-path.
[`stroke()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke)
Draws the shape by stroking its outline.
[`fill()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill)
Draws a solid shape by 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 form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.
The second step is calling the methods that actually specify the paths to be drawn. We'll see these shortly.
The third, and an optional step, is to call closePath(). This method tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.
## Notes
When the current path is empty, such as immediately after calling beginPath(), or on a newly created canvas, the first path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path. **Note:** When you call fill(), any open shapes are closed automatically, so you don't have to call closePath(). This is not the case when you call stroke().
## Styles and colors
`fillStyle = color`
Sets the style used when filling shapes
`fillStroke = color`
Sets the style for shapes' outlines
**Note**: When you set the strokeStyle and/or fillStyle property, the new value becomes the default for all shapes being drawn from then on. If you want to use a different color, you must reassign `fillStyle` or `strokeStyle`.
You can also control transparency either globally, using `globalAlpha` which takes a value between 0 and 1 and will affect all shapes drawn after it's set up, or on per-element basis using `strokeStyle` and `fillStyle` with RGBA or another color format that supports transparency.
```js
// Assings default transparency value
ctx.globalAlpha = 0.2;
// Assigning transparent colors
// to stroke and fill style
ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
```
## Images
Importing images into a canvas is a two-step process:
1. Get a reference to a supported image type. It is also possible to use images by providing a URL.
2. Draw the image on the canvas using the `drawImage()` function.
### Supported image types
`HTMLImageElement`
