Create Graphics with HTML Canvas
|
Learn the latest features of TypeScript and how to apply them to real-world problems. Discover optional chaining, unknown type, private classes, tuple types, and more. Prevent type widening and efficiently type string literals. Join this course to enhance your TypeScript skills and reduce development overhead.
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.
Course Content
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
