[egghead.io] Create Graphics with HTML Canvas

Jul 21 2017 7 ep. 3 mins 31
[egghead.io] Create Graphics with HTML Canvas Podcast artwork

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.

  Technology  Education
RSS feed Share
Copy RSS


Subscribe on Podcast Addict


Draw in HTML Canvas

Jul 21 2017 2 mins  
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 cr

Add color to graphics using HTML Canvas

Jul 21 2017 2 mins  
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.

Specifying Height and Width on the Canvas Element

Jul 21 2017 1 mins  
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.

Draw circles in HTML Canvas using .arc

Jul 21 2017 3 mins  
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

Add strokes to circles using HTML Canvas

Jul 21 2017 2 mins  
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`.

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

Jul 21 2017 5 mins  
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` meth

Add click interaction to HTML Canvas using JavaScript events

Jul 21 2017 5 mins  
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.