Create Graphics with HTML Canvas
Offered By: egghead.io
Course Description
Overview
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.
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.
Syllabus
- Draw in HTML Canvas
- Add color to graphics using HTML Canvas
- Specifying Height and Width on the Canvas Element
- Draw circles in HTML Canvas using .arc
- Add strokes to circles using HTML Canvas
- Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart
- Add click interaction to HTML Canvas using JavaScript events
Taught by
Alyssa Nicoll
Related Courses
JavaScript Game Development: Create Your Own Breakout GameUdemy Pixel Effects with JavaScript and HTML Canvas - Tutorial
freeCodeCamp Learning HTML Canvas
LinkedIn Learning Learn HTML Canvas - Pixels, Particles & Physics
Udemy Learn HTML Canvas: Advanced Text Effects
Udemy