Add color to graphics using HTML Canvas

InstructorAlyssa Nicoll

Share this video with your friends

Send Tweet

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.

Kunle
~ 7 years ago

In Lesson 2, at the end when you shortened the code where you remove canvas variable to just grab the context, it has a bug, you are still referencing canvas when you get the height and width, but there is no canvas variable.

Rustam Eynaliyev
~ 7 years ago

I love your explanations, very fun to watch. please make more videos!

s2_fe
~ 7 years ago

@Kunle

there is still the "canvas"-ID in the html, so everything is fine. :) She just got rid of the js variable. and if you mean the info to "canvas.width": the context still knows what "canvas" is, just console.log(context);

Muhammad Athar
~ 7 years ago

In Lesson 2, at the end when you shortened the code where you remove canvas variable to just grab the context, it has a bug, you are still referencing canvas when you get the height and width, but there is no canvas variable.

I am asking the same question.

dean one
~ 6 years ago

haha, fun to watch!