Gain insights into game development with JavaScript. Delve into graphics, game loops, and collision detection by creating Tetris. Showcase your skills with a fully functioning game.

In this course, you will get hands-on game development experience with JavaScript. Using the classic game of Tetris, you are going to cover concepts like graphics, game loops, and collision detection. 

By the end of this course, we will have a fully functioning game with points and levels. Try it out with your friends and put it in your portfolio for employers to see.

Game Development with JavaScript: Creating Tetris

The HTML canvas element provides a blank canvas on which we can draw our game. Drawing is a fundamental aspect of making our game, and we will focus on how we can draw on the `canvas` to make the graphics for our game.

## Using canvas

The default size of the canvas is 300 pixels × 150 pixels (width × height). However, custom sizes can be defined using the HTML height and width properties.
We add the canvas element to the HTML:

```html
<canvas id="canvas"></canvas>
```

We can add a reference to the HTML `<canvas>` element in the DOM (Document Object Model) using the [getElementById](https://www.educative.io/edpresso/what-is-the-getelementbyid-method-in-javascript) method.

```js
let canvas = document.getElementById('canvas');
```

We have the `canvas` element available, but we cannot draw directly on it. We can use different **rendering contexts**. 

## Canvas context

The `canvas` has a **2D drawing context** used for drawing shapes, text, images, and other objects. First, we choose the color and brush, and then we paint. We can change the brush and color before every new drawing, or we can continue with what we have.

The `HTMLCanvasElement.getContext()` method gets the `canvas` context, where we render the graphics. By supplying `'2d'`as the argument, we get the `canvas` 2D rendering context:

```
let ctx = canvas.getContext('2d');
```

## Drawing

The last thing we need to do before drawing something is to choose a color.

```
ctx.fillStyle = 'red';
```

Once we have a `canvas` context, we can draw on it using the [`canvas` context API](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D). We can use `fillRect()` to draw a filled rectangle colored by the current `fillStyle`.

```js
ctx.fillRect(x, y, width, height);
```

This draws a filled red rectangle. Since the pieces of our Tetris game are a bunch of rectangles, we already know enough to do the graphics for our game!

## Animations

Canvas uses **immediate rendering**: When we draw, it immediately renders on the screen, but, it is a fire-and-forget system. After we paint something, the `canvas` forgets about the object and only knows it as pixels. So, there is no object that we can move. Instead, we have to draw it again.

Doing animations on `Canvas` is like making a stop-motion movie. In every frame, we need to move the objects a little bit to animate them.

We can use `clearRect()` to clean up the previous cell once we move onto the next. Using the width and height of the `canvas`, we can clean it between consecutive paints.

```js
const {width, height} = this.ctx.canvas;
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 10, 10);
ctx.clearRect(0, 0, width, height);
ctx.fillRect(1, 1, 10, 10);
```

Here is an example of the simplest of animations, including painting a blue square, cleaning the canvas, and then painting the blue square down and to the right a bit.

Now that we know the basics of `canvas`, it's time to put this knowledge to use and start with the graphics of our game.







The HTML canvas element provides a blank canvas on which we can draw our game. Drawing is a fundamental aspect of making our game, and we will focus on how we can draw on the `canvas` to make the graphics for our game.

# Using canvas

The default size of the canvas is 300 pixels × 150 pixels (width × height). However, custom sizes can be defined using the HTML height and width properties.
We add the canvas element to the HTML:

```html
<canvas id="canvas"></canvas>
```

We can add a reference to the HTML `<canvas>` element in the DOM (Document Object Model) using the [getElementById](https://www.educative.io/edpresso/what-is-the-getelementbyid-method-in-javascript) method.

```js
let canvas = document.getElementById('canvas');
```

We have the `canvas` element available, but we cannot draw directly on it. We can use different **rendering contexts**. 

# Canvas context

The `canvas` has a **2D drawing context** used for drawing shapes, text, images, and other objects. First, we choose the color and brush, and then we paint. We can change the brush and color before every new drawing, or we can continue with what we have.

The `HTMLCanvasElement.getContext()` method gets the `canvas` context, where we render the graphics. By supplying `'2d'`as the argument, we get the `canvas` 2D rendering context:

```
let ctx = canvas.getContext('2d');
```

# Drawing

The last thing we need to do before drawing something is to choose a color.

```
ctx.fillStyle = 'red';
```

Once we have a `canvas` context, we can draw on it using the [`canvas` context API](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D). We can use `fillRect()` to draw a filled rectangle colored by the current `fillStyle`.

```js
ctx.fillRect(x, y, width, height);
```

This draws a filled red rectangle. Since the pieces of our Tetris game are a bunch of rectangles, we already know enough to do the graphics for our game!

# Animations

Canvas uses **immediate rendering**: When we draw, it immediately renders on the screen, but, it is a fire-and-forget system. After we paint something, the `canvas` forgets about the object and only knows it as pixels. So, there is no object that we can move. Instead, we have to draw it again.

Doing animations on `Canvas` is like making a stop-motion movie. In every frame, we need to move the objects a little bit to animate them.

We can use `clearRect()` to clean up the previous cell once we move onto the next. Using the width and height of the `canvas`, we can clean it between consecutive paints.

```js
const {width, height} = this.ctx.canvas;
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 10, 10);
ctx.clearRect(0, 0, width, height);
ctx.fillRect(1, 1, 10, 10);
```

Here is an example of the simplest of animations, including painting a blue square, cleaning the canvas, and then painting the blue square down and to the right a bit.

Now that we know the basics of `canvas`, it's time to put this knowledge to use and start with the graphics of our game.







In this lesson, you will learn about HTML Canvas and how to use it for JavaScript game graphics.

Course Overview

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Final Words

Canvas

Using canvas