- 11 hours on-demand video
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Set up and configure a HTML5 Canvas project.
- Compose basic forms to create other shapes.
- Style and change color for your drawing tools.
- Utilize images and transformations for the canvas.
- Animate drawings.
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.
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.
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.
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.
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.'
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.
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.
HTML5 Canvas Graphics and Animations
• 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.
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!
- Web developers with an interest in drawing and coloring HTML elements.
- Artists looking to access the web browser as a medium.