Packt Publishing – Mastering HTML5 Canvas

Packt Publishing – Mastering HTML5 Canvas

Revolutionize web visualizations with the power of HTML5 canvas

Revolutionize web visualizations with the power of HTML5 canvas

About This Video

• Master the art of creating complex shapes with the canvas API
• Add, delete, and modify canvas elements to make your applications dynamic on the fly
• Get to grips with pixel manipulation in canvas and control the canvas itself

In Detail

Web development is an exciting, ever-changing world that is getting progressively dynamic. What web developers need in this fast-paced world is the power of controlling visualizations on the fly—and in comes HTML5 canvas to the rescue! Powered by JavaScript, this powerful 2D API helps developers create graphics and animations directly in the browser. It offers great portability and works on almost all modern browsers, making it accessible just about anywhere.

Mastering HTML5 Canvas walks you through the fascinating arena of web development, covering all the critical concepts of drawing and manipulating pixels in the canvas through tons of examples and designs.

We start the course off by introducing the foundations of the canvas API. You’ll learn how to create canvas elements dynamically and draw basic shapes, and you’ll get familiar with the work environment. Then we shift our focus on to drawing, where you will draw lines, original shapes, paths, and even multiple pointed shapes.

Next, we’ll then leverage the logic that stands behind the cosine and sine functions and through them, create more complicated shapes. This new insight will enable you to create more complex and advanced shape combinations. We will continue our journey by getting to grips with the various types of curves, images, and gradient colors. Finally, we will deal with manipulation of the canvas itself.

By the end of this course, you will know how to draw in HTML5 canvas, create complex shapes, and use angles, arcs, and curves to create your own art work. You will be a master of the HTML5 2D canvas API.

Get Packt Publishing – Mastering HTML5 Canvas At tenco.pro

Course Curriculum

Getting Started with HTML5 Canvas

• The Course Overview (2:25)
• Preparing Our JavaScript for Canvas (9:34)
• Canvas Hello World (6:19)
• The Palau Flag and the Perfect Circle (5:03)
• Creating Canvas Elements Dynamically (6:12)

Creating Shapes Using Paths

• Drawing Our First Canvas Lines (9:43)
• Meeting Canvas Paths (5:29)
• Drawing Triangles with Paths (7:57)
• Creating the Flag of Guyana (12:20)
• Creating Multipoint Shapes (8:46)

Drawing with Angles

• Working with Sine, Cosine, and Radians (11:31)
• Creating an Animated Clock (9:46)
• Creating Complex Shapes (10:26)
• Adding More Vertices (11:48)t
• Overlapping Shapes to Create Other Shapes (7:22)

From Curves to Gradients

• Drawing Arcs (7:00)t
• Drawing with Quadratic Curves (7:23)
• Drawing with Bezier Curves (4:31)
• Drawing Images into Canvas (7:10)
• Creating an Interactive Linear Gradient (9:06)rt
• Working with Interactive Radial Gradient (6:07)

Manipulating the Canvas

• Working with Text (8:17)
• Pixel Manipulation (7:22)
• The Art of Clipping (9:16)
• Transforming the Canvas (5:53)
• Scale, Rotate, and Translate (6:29)

Get Packt Publishing – Mastering HTML5 Canvas At tenco.pro