HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

It’s really fun to work with graphics when building apps and websites, but how do you get started? HTML5 has a technology called **Canvas** that lets us draw graphics to our screens. We can do everything from making basic shapes to creating complex interactive games and animations!

 In this course, we will learn the basics of using **Canvas**. We’ll start by learning how to create a canvas on an HTML page. Next we will learn how to draw and style with fills and strokes. Finally, we will add interactivity to canvas elements.


It’s really fun to work with graphics when building apps and websites, but how do you get started? HTML5 has a technology called **Canvas** that lets us draw graphics to our screens. We can do everything from making basic shapes to creating complex interactive games and animations! 

In this course, we will learn the basics of using **Canvas**. We’ll start by learning how to create a canvas on an HTML page. Next we will learn how to draw and style with fills and strokes. Finally, we will add interactivity to canvas elements.

Draw in HTML Canvas

Black is getting awfully boring, let’s add some color to our shapes. 
 
We can use the `fillStyle` method on our `context` to add colors. In this lesson we will look at how we can pass color names, hex values, and rgba values as strings to `fillStyle` to add colors to our graphics. 
 
We’ll also show why the order of where you call methods on `context` matters.

Add color to graphics using HTML Canvas

Let's take a look at a bug you can run across, by not specifying `height` and `width` of your HTML `canvas` element.
We will look at giving the `canvas` element a `height` and `width`  property inline. 
We’ll also look at how we can alternatively give `canvas` those `height` and `width` properties right in our Javascript.

 Specifying Height and Width on the Canvas Element

Circles are one of the most difficult and prestigious shapes to achieve in Canvas. No circle method is provided, instead, we must utilize the [.arc](https://www.w3schools.com/tags/canvas_arc.asp) method to achieve circle happiness. 

The `.arc` method however is a bit funny, it doesn’t use degrees like we’re used to, instead it uses radians. So in this lesson we’ll also learn how we can use some maths to be able to enter the familiar degrees. 

Draw circles in HTML Canvas using .arc

In this lesson we will look at the dangers of not closing your circles. So we’ll have to learn to build the habit of always closing our paths.

We also cover giving circles `stroke`, along with specifying strokes styles such as `lineWidth`, `strokeStyle`, and `fillStyle`. 

Add strokes to circles using HTML Canvas

You might think that drawing a piece of a pie possible with the `.arc` method. However, in this lesson, you'll see why that is impossible. Instead we must draw a pie piece with the [.arcTo](https://www.w3schools.com/tags/canvas_arcto.asp) `canvas` method. 

`.arcTo` takes `x1`, `y1`, `x2`, `y2` and `radius` to draw a nifty arc shape. You then must use the `moveTo` and `lineTo` methods to complete the beautiful piece of a pie. As a bonus, the `clearRect` method is used to demonstrate clearing the `canvas`!

Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart

Being able to draw shapes is cool and all, but we want to add interactivity to our graphics! 
In this lesson, we will learn how to add `'click'` handlers to our `canvas` elements using the `addEventListener` method. 

Create Graphics with HTML Canvas

Alyssa Nicoll

Course Content