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!

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 cover scale, scale-x & y perimeter, scaling, dilation & contraction, reflections/vertical reflections, GROK, and CanvasRenderingContext2D.transfer

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.

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 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.

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.

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.

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.