0% completed

All LessonsFree Lessons (5)

DOM vs. Canvas

DOM vs. Canvas When to Use Which?Summary Further Reading

Getting Started with the Canvas

Getting Started with the Canvas Meet the Canvas Element Drawing Things Conclusion

Drawing Basics / Lines

Canvas Drawing Basics How Drawing in the Real World Works Drawing in the Canvas World Conclusion

Drawing Curves

Drawing Beziér Curves on the Canvas Drawing a Quadratic Beziér Curve Drawing a Cubic Beziér Curve Conclusion

Drawing Multiple Things

Drawing Multiple Things This Seems Simple, No?Creating an Individual Shape Draw Order Matters Conclusion

Drawing Rectangles (and Squares)

Drawing Rectangles (and Squares) on the Canvas Drawing Rectangles Conclusion

Drawing Triangles

Drawing Triangles on the Canvas Drawing Triangles Conclusion

Drawing Circles

Drawing Circles on a Canvas Meet the Arc Function Displaying the Circle Conclusion

Modifying How Your Corners Look

Modifying How Corners Look Meet the lineJoin Property Conclusion

Working with Colors

Working with Colors

Colors, strokeStyle, and fillStyle!

Specifying Gradients

Drawing Text

Drawing Text on the Canvas From Text to Pixels Conclusion

Drawing Images

Drawing Images on the Canvas Images and drawImage()Displaying an Image Scaling the Image Slicing an Image Conclusion

Canvas Transformations

Canvas Transformations Meet the Transformation Methods Undoing Transforms Conclusion

Structuring Your Drawing Code

Structuring your Drawing Code Using Functions Using Objects Conclusion

Animating with requestAnimationFrame

Animating with requestAnimationFrame Meet requestAnimationFrame Using This Magical Function Simple Example Your Frame Rate Stopping Your Animation Loop The Timestamp Argument Conclusion

Creating Animations on the Canvas

Creating Animations on the Canvas Animation 101 Animating on the Canvas Implementation Time Conclusion

Animating Many Things on the Canvas

Animating Many Things on a Canvas Deconstructing the Example Conclusion

Creating Motion Trails

Creating Motion Trails The Basic Approach Creating the Motion Trail Conclusion

Creating Sprite Animations

Creating Sprite Animations on the Canvas The Sprite Sheet How All of This Works It's Coding Time!Conclusion

Working With the Mouse

Working with the Mouse The Mouse and the Canvas Getting the Exact Mouse Position Conclusion

Follow the Mouse Cursor

Follow the Mouse Cursor The Basic Approach Conclusion

Mouse Follow with Ease

Mouse Follow with Ease Here's the Code Conclusion

Working With the Keyboard

Working With the Keyboard Meet the Keyboard Events Using These Events The Keyboard Event Properties Some Examples Conclusion

Moving Shapes Using the Keyboard

Moving Shapes on the Canvas Using the Keyboard The Basic Approach Displaying Our Triangle Dealing With the Keyboard Adjusting the Position Preventing Default Keyboard Behavior Improved Keyhandling Logic Conclusion

Resizing the HTML Canvas Element

Resizing the HTML Canvas Element Why CSS Doesn't Work Properly Resizing your Canvas Why the Weird Behavior?Conclusion

Detect Whether a Font is Installed

Detect Whether a Font is Installed Grab the Code Overview of the Code Conclusion

HTML5 Canvas: From Noob to Ninja - an interactive deep dive/

...

/

Colors, strokeStyle, and fillStyle!

Colors, strokeStyle, and fillStyle!

We'll cover the following...

The primary way you colorize content is by setting the strokeStyle property for shape outlines and the fillStyle property for the shape insides:

Between these two properties, you can color everything from lines to geometric shapes to text.

Let's say we have a rectangle that looks as follows:

The code responsible for this work of art looks like this:

HTML
JavaScript

javascript

To set the fill color of this element, add line 3 that specifies the fillStyle property:

Press + to interact

context.beginPath();
context.rect(75, 100, 250, 150);
context.fillStyle = "#FFCC00";
context.fill();

Let’s not stop with just the fill. Since we are already here, we are going to next add a thick outline and give that a color via the strokeStyle property. Add lines 9-11 to your code:

HTML
JavaScript

javascript

The two lines of code that took our pretty drab looking rectangle and helped make it a bit more lively are the fillStyle and strokeStyle properties. You can argue that the fillStyle probably had more to do with it since the outline is still a pretty dull shade of gray, but anyway…but what we are going to do from here on out is take a look at ...