HTML5 Canvas Graphics and Animations
4.4 (8 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
59 students enrolled

HTML5 Canvas Graphics and Animations

Your very own digital canvas!
4.4 (8 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
59 students enrolled
Last updated 1/2019
English
English
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Set up and configure a HTML5 Canvas project.
  • Draw lines, rectangles, curves, and arcs with JavaScript.
  • Compose basic forms to create other shapes.
  • Style and change color for your drawing tools.
  • Utilize images and transformations for the canvas.
  • Animate drawings.
Course content
Expand 26 lectures 10:49:08
+ HTML5 Canvas Graphics and Animations
26 lectures 10:49:08

HTML5 Canvas elements bring art and animation to the browser. In this series, we explore the capabilities of the HTML5 Canvas element in conjunction with JavaScript. This includes simple "pen" drawings, image displaying, image manipulation, and animations. Knowing HTML5 Canvas provides a great way to start with in-browser games as well as expressing those artistic desires. Hope to see you there!


Preview 03:01

Justin and Zach begin the discussion about HTML5 Canvas Graphics & Animations, what is the Canvas Element, pixels default to 150, using MDN (Mozilla Developer Network), Canvas API, atom.io, using Atom, creating the Canvas element, CSS Grid Display Type, ES 2015, and setting width & height.

Preview 32:59

Justin and Zach look at drawing lines & rectangles, coordinate system, 400px X 600px for rectangle inside Canvas, down & across to the right for positive numbers in rectangle, and positioning the rectangle.

Drawing Lines and Rectangles
21:18

Justin and zach continue the discussion regarding drawing lines & rectangles, CTX.StrokeRect, ClearRect, FillRect, and getRectCenter, and the the basic build and positioning of our rectangle concluded.

Drawing Lines and Rectangles Pt. 2
21:41

Justin and Zach discuss using curves and arcs in canvas graphics & animations, what a Bezier Curve is, what a Quadratic Curve is, 2D graphics rendering Context, App.JS File, 'BezierCurve'To function, Bezier Curves allow us to stroke & fill, Bezier Curves have 6 Arguments, and the importance of Close Path command.

Drawing Curves and Arcs
22:21

Justin and Zach cover Quadratic Curves, how Bezier Curves & Quadratic Curves are paths, the QuadraticCurveTo method, control points, and how the Quadratic Curve has one control point.


Drawing Curves and Arcs Pt. 2
19:43

Justin and Zach go over general info about Arcs, Arc as a method, ArcTo, Arc has 5 arguments, Arcs can be stroked or filled, the degrees to radiants.function, and how Arcs are good for circular shapes.

Drawing Curves and Arcs Pt. 3
29:45

In this episode, Vonne and Justin explore the creation of more advances shapes using drawing primitives (lines!) from the previous episodes. Justin demonstrates the thought process and implementation of triangle drawing function.

Creating Other Shapes
24:28

In this episode, Vonne and Justin explore the creation of more advances shapes using drawing primitives (lines!) from the previous episodes. Justin demonstrates the thought process and implementation of hexagon drawing function.

Creating Other Shapes Pt. 2
26:54

In this episode, Vonne and Justin explore changing some of the styles and colors of elements drawn in the HTML5 Canvas. In particular, Justin demonstrates changing the color of lines, altering the cap and joins of lines, as well as how to change the line dashing property.

Drawing Styles and Colors
31:51

In this episode, Vonne and Justin explore changing some of the styles and colors of elements drawn in the HTML5 Canvas. In particular, Justin demonstrates changing the fill color including transparencies of filled figures as well as demonstrating some "gotchas" when using stroke and fill styles together.

Drawing Styles and Colors Pt.2
14:59

In this episode, Vonne and Justin explore the drawing of text on the canvas element. Additionally, Justin demonstrates the changing of attributes of the context object to draw text with varying placements and styles.

Drawing Text
31:53

In this episode, Vonne and Justin explore the drawing of gradients on the canvas element. Justin demonstrates the creation and usage of linear gradient objects.

Drawing Gradients
26:03

In this episode, Vonne and Justin explore the drawing of text on the canvas element. Justin demonstrates the creation and usage of radial gradient objects.


Drawing Gradients Pt. 2
16:36

Justin and Zach discuss 'Usingimages,' scalable Vector Graphics, input/output operation, add Event Listener, fire On-Load Event/register On Load Event, rendering Context/Syntax, Aspect ratio, width over height, and small-medium-large image creation.


Using Images
27:07

Justin and Zach conclude the discussion about using images, getRectCenter, center-dims, modify the HTML, utility class-'hidden,' asynchronous nature, DOMCenterLoaded, frame rate, and flip book like effect.


Using Images Pt. 2
25:12

Justin and Zach look at PNG image (logo.png), const createCanvasFromImage, Canvas objects, using Python server, local host:8080, RBGA, and algorithm for gray scaling.

Using Images: Grayscale Filter
24:06

Justin and Zach discuss using Transformations, what are Transformations, expose-explore, canvas, getcontext, restore, stroke & fill, center of drawing canvas, Ctx.translate (100,100), translate & reflect, CanvasRenderingContext2D.rotate, Set trans form, rotate, radians, an change the origin.

Using Transformations
30:31

Justin and Zach cover scale, scale-x & y perimeter, scaling, dilation & contraction, reflections/vertical reflections, GROK, and CanvasRenderingContext2D.transfer

Using Transformations Pt. 2
25:27

Justin and Zach discuss clipping & composites, what clipping is, what composites are, clipping mask, PNG image, draw image, clipping circle, fill canvas, frame rate, and x + ticks.

Clipping and Composites
28:30

Justin and Zach discuss Composites, what are Composites, using graphic image editor, graphics image editor is a blending tool, source & destination, opaque & transparent, const figure, what XOR does, global composite operation, 'drawn in the order called,' composite type, source-over/source-out, and 'difference.'

Clipping and Composites Pt. 2
22:44

Justin and Zach cover more about animations, frame rage 25X per second, 'Request Animation Frame' vs. set interval/set time-out, velocity or speed (DX), positive to right & down/negative to left & up, callback parameter, dx:1 & dy:1, const main, and Request Animation Frame.

More About Animations
27:12

Justin and Zach cover more about animations part 2, ctx.fillStyle, render ctx, not painted-hidden, const logo, cancel animation frame, bit map graphic, and increased height & width for zoom.

More About Animations Pt. 2
27:16

Justin and Zach discuss what is a 'Particle,' X-Y options, color:options, options.radius, fat arrow functions, main function, particle.update, particle.render, requestAnimationFrame (main), 'helpers' functions, why we have to call 'fill' to draw to the screen, and (left-right) position.

Let's Build It: Particles Everywhere
30:04

Justin and Zach continue the discussion about creating & using particles in the canvas graphic, why every particle has its own update function, prototype chains, const createParticles, random number, grab object, factory function, explicit return, choice of colors, and how adding 1,000 particles on the canvas graphic simulates contained gas.

Let's Build It: Particles Everywhere Pt. 2
33:24

Justin and Zach cover Event Listener, user interactions, using mouse & keys to interact with function, how to utilize Dom events, attaching an Event Listener to the canvas element, a circle as a javascript data function, and the key code for color.

Responding to Events
24:03
Requirements
  • Familiarity with JavaScript.
  • Understanding of using JavaScript to manipulate DOM elements.
Description

HTML5 Canvas Graphics and Animations

HTML5 Canvas elements bring art and animation to the browser. In this series, we explore the capabilities of the HTML5 Canvas element in conjunction with JavaScript. This includes simple "pen" drawings, image displaying, image manipulation, and animations. Knowing HTML5 Canvas provides a great way to start with in-browser games as well as expressing those artistic desires. Hope to see you there!

Course Format

•          Binge-worthy TV shows! Watch comprehensive, in-depth episodes that use a talk show-like format to keep you engaged while learning.

•          You can pick and choose episodes or you can watch as a complete series.

•          A little humor, anecdotes, and real-world examples.

Other Courses

Ready to become a DevPro? Get more DevProTV training with a variety of topics. Join Justin and DevProTV to level up your programming prowess!

Updates and Versions

The programming world updates at a break neck pace. As a result, there are times that certain tools, editors, libraries have changed. While syntax or names may change, the foundations remain the same. Though we hope to keep things updated, there may be time before that can occur. I recommend seeing if you can translate between changes and if all fails, ask questions!

Who this course is for:
  • Web developers with an interest in drawing and coloring HTML elements.
  • Artists looking to access the web browser as a medium.