Mastering HTML5 Canvas [Video]

Mastering HTML5 Canvas [Video]

This video is included in a Mapt subscription
Ben Fhala

Revolutionize web visualizations with the power of HTML5 canvas
$0.00
$80.75
$29.99p/m after trial
RRP $94.99
Subscription
Video
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Video Details

ISBN 139781786467942
Course Length3 hours and 23 minutes

Video Description

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.

Style and Approach

This video course follows a pragmatic approach to help you gain a very solid understanding of the HTML5 canvas API. The course keeps building on your knowledge, with each section discussing several features of the HTML5 canvas to help you create powerful visualizations for your applications.

Table of Contents

Getting Started with HTML5 Canvas
The Course Overview
Preparing Our JavaScript for Canvas
Canvas Hello World
The Palau Flag and the Perfect Circle
Creating Canvas Elements Dynamically
Creating Shapes Using Paths
Drawing Our First Canvas Lines
Meeting Canvas Paths
Drawing Triangles with Paths
Creating the Flag of Guyana
Creating Multipoint Shapes
Drawing with Angles
Working with Sine, Cosine, and Radians
Creating an Animated Clock
Creating Complex Shapes
Adding More Vertices
Overlapping Shapes to Create Other Shapes
From Curves to Gradients
Drawing Arcs
Drawing with Quadratic Curves
Drawing with Bezier Curves
Drawing Images into Canvas
Creating an Interactive Linear Gradient
Working with Interactive Radial Gradient
Manipulating the Canvas
Working with Text
Pixel Manipulation
The Art of Clipping
Transforming the Canvas
Scale, Rotate, and Translate

What You Will Learn

  • Familiarize yourself with the foundations of working with the canvas 2D API
  • Control and regulate shapes with the help of quadratic and bezier curves
  • Explore interesting canvas methods to create paths, arcs, shapes, text, and images
  • Work with the beginPath and closePath methods to create your own geometric shapes
  • Use math-based interactions, such as sine and cosine, to build complex shapes and animations with ease
  • Get creative using the canvas features that control curves, colors, images, and gradients 
  • Fetch pixel data and manipulate it on the bitmap level with the canvas API
  • Enhance the look and feel of your text using transformation effects such as scale, translate, and rotate

Authors

Table of Contents

Getting Started with HTML5 Canvas
The Course Overview
Preparing Our JavaScript for Canvas
Canvas Hello World
The Palau Flag and the Perfect Circle
Creating Canvas Elements Dynamically
Creating Shapes Using Paths
Drawing Our First Canvas Lines
Meeting Canvas Paths
Drawing Triangles with Paths
Creating the Flag of Guyana
Creating Multipoint Shapes
Drawing with Angles
Working with Sine, Cosine, and Radians
Creating an Animated Clock
Creating Complex Shapes
Adding More Vertices
Overlapping Shapes to Create Other Shapes
From Curves to Gradients
Drawing Arcs
Drawing with Quadratic Curves
Drawing with Bezier Curves
Drawing Images into Canvas
Creating an Interactive Linear Gradient
Working with Interactive Radial Gradient
Manipulating the Canvas
Working with Text
Pixel Manipulation
The Art of Clipping
Transforming the Canvas
Scale, Rotate, and Translate

Video Details

ISBN 139781786467942
Course Length3 hours and 23 minutes
Read More

Read More Reviews