Mastering HTML5 Canvas (Udemy.com)

Revolutionize web visualizations with the power of HTML5 canvas

3.6
( 8 Reviews )

Created by: Packt Publishing

Produced in 2016

icon
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

icon
Quality Score

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 72 / 100

icon
Course 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 flyand 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.
About The Author
Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.
Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and five video courses: jQuery UI Development; Learning Object-Oriented JavaScript; Mastering JavaScript; JavaScript Design Patterns; Web Visualization with HTML5, CSS3, and JavaScript, all for Packt Publishing.Who this course is for:
  • If you are a JavaScript developer with a solid understanding of the fundamentals of the language and wish to expand your capabilities by learning how to draw and manipulate data through the HTML5 canvas 2D API, this course is for you!
Read More product length iconTime: 3.5h

icon
Instructor Details

placeholder

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.



Read More

icon
More courses by Packt Publishing

.NET Core Microservices

$11.99

JavaScript Design Patterns: 20 Patterns for Expert Code

$11.99

Mastering Go Programming

$11.99

Learning Path: Automation with Ansible, Puppet, and Salt

$11.99

Learning Path: Magento: Master and Test Magento 2 with Ease

$11.99

DevOps Fundamentals with Azure

$11.99

All courses by Packt Publishing

icon
More html 5 courses

2D Game Development With HTML5 Canvas, JS - Tic Tac Toe Game

$11.99

Build a new and modern looking Responsive websites

$11.99

Build Modern Responsive Website With HTML5, CSS3 & Bootstrap

$11.99

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

$11.99

How to Create A Website: An HTML Tutorial and CSS Tutorial

$11.99

Code Your First Website with HTML & CSS for Kids & Beginners

$11.99

All html 5 courses

icon
Reviews

3.6

8 total reviews

5 star 4 star 3 star 2 star 1 star
% Complete
% Complete
% Complete
% Complete
% Complete
Reset Filter
Write a Review arrow

By Rik Chang

nice

By Elliot Geno

The guy needs to take a breath every once and a while. He sounds like a combo of Rick Moranis and the Micro Machines guy.

By Mike Gollub

Preconfigured.

Overall this is a good class if HTML5 canvas specifically is important to you. The instructor really knows the material and does a great job of organizing the code and the canvases. He does an OK job explaining the concepts. Good enough for me - others may have issues.

I have a few minor issues as follows.

- The instructor touches upon canvas as a drawing construct vs canvas as an HTML element early in the course but doesn't follow through. I was hoping for a little more detail.

- The labels displayed on the individual lessons (UL corner) are 1 section ahead. Kind of annoying.

My other issues all have to do with the provided code. First the abrupt start on said code in lesson 2, then the occasional discrepancy between the code I had and the code the instructor was using.

As an example, in lesson 1 I had to track down and correct a style for the canvas before my Palau looked like what I saw in the lesson.

But even with those headaches, still a pretty good class for HTML5 canvas.

By Lysle Shaw-McMinn

My advice to the instructor is to describe what things (such as the function we are learning about) do instead of just saying out loud what you are typing next. That is the difference between a course and a code-along. This was a code-along.

I could have easily taken the final code file supplied to me and just scrolled through it myself and gotten as much information as I did listening to you and coding along with you.

By Abuchie Kamara

beautiful, I'm delighted I join this group thanks so much.

By Julian Peter Pollak

This course is a very good introduction to the HTML Canvas and if it was named so I would give it 5 Stars.

As a master course it is lacking part of the Canvas API.

In addition it does not present any information regarding tools that exist in the market that will help you become a master of the Canvas.

Ben Fhala does a very good job explaining most of the concepts and the lessons are fun.

By Stuart

Great Job so far thanks

I really enjoyed it . Not too long and just enough. Thank you Ben !

By Adam Trager

Bad coding conventions, billed as expert level but so far not.

Load More

Mastering HTML5 Canvas
Visit Course Write a Review
  • Video Duration: icon 3.5h
  • Price: 11.99 Track Price 11.99 Track Price
  • Provider: icon Udemy
  • Year: icon 2016
  • Language: icon English, English [Auto-generated]
  • Certificate: icon Yes
30-Day Money-Back Guarantee

Udemy Coupon Price Tracker

For any issues or feature requests please email CourseDuck's Co-Founder at michaelk@courseduck.com