 Resources from Alyssa Nicoll in 2024

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.

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

html

Create Graphics with 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


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

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. 

Add click interaction to HTML Canvas using JavaScript events

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the need for tables for all time. Need a column with each item evenly spaced but starting their alignment on the top? No problem! How about a row with the items evenly spaced out as well as equal spacing around the edges? We have you covered!

Reuse Flexbox Styles With A Sass Mixin

Cascading Style Sheets bring order and beauty to our applications.

Learn how to create tabs with nothing more than good ole' CSS. Look Ma, No Javascript!

**note:** *This approach has some accessibility issues. To make a tab component that is properly accessible, it requires some JavaScript.*

Topics

Instructors

Content Type

Alyssa Nicoll