Learn HTML5 Canvas for beginners

Create an HTML5 canvas element, set its width and height, and style it with CSS to visualize a graphics container JavaScript can draw on, animate, and render images or text.

Connect the html5 canvas to javascript using the dom and document.getElementById to access the canvas element. Get the context with getContext and prepare the drawing workflow for future shapes.

Learn how to draw rectangles on a canvas using fillRect and strokeRect, set x, y, w, h coordinates, and apply hex color fills to create visible shapes and backgrounds.

Learn how to manipulate rectangles on the HTML5 canvas, using clear rectangles to create borders, adjust coordinates for thickness, and prepare for drawing paths and isolating canvas sections.

Learn how to add and customize shadows for canvas shapes by setting shadow color, x and y offsets, and blur, then draw filled rectangles to reveal the shadow.

Learn to draw lines and custom paths on the canvas using begin path, move to, line to, and stroke or fill, building shapes with x y coordinates in JavaScript.

Learn to draw a circle on HTML5 canvas using ctx.arc with a center, radius, and start and end angles (0 to 2π), then stroke or fill and close the path.

Learn how to draw curves on the HTML5 canvas using Bezier and quadratic curves, including setting start points, control points, and using beginPath, moveTo, and stroke to create curved paths.

Learn to add loops and dynamic calculations to HTML5 canvas drawings using curves, move to, line to, and close path, then apply stroke, fill, line width, and stroke style.

Update the canvas visuals by adding a white fill and teeth-like rectangles on a curve, adjust positions and sizes through trial and error, and preview the next lesson adding eyes.

Add eyes to your HTML5 canvas drawing by creating new arcs, adjusting positions, and choosing fill colors, then explore dynamic for loops to make the face interactive.

Learn how to apply fill and stroke colors in HTML5 canvas using hexadecimal and rgb(a) values, adjust red, green, blue channels, and use alpha for transparency with looped examples.

Create a loop that draws multiple colored rectangles using RGB and RGBA colors, with dynamic alpha based on the loop index, demonstrating fillRect and color math.

Learn to draw and style lines in HTML5 canvas by starting paths, moving to coordinates, stroking lines, and adjusting line width, stroke color, and cap styles.

Create dashed lines on the canvas by setting a dash pattern, starting a new path, and stroking a rectangle, while adjusting dash length, spacing, and line width.

Create linear gradients in canvas by defining a gradient with start and end points, add color stops, set fill style, and draw rectangles to visualize the gradient.

Explore radial gradients with createRadialGradient to set the starting position, ending position, radii, and the external circle coordinates on the canvas. Compare with linear gradients and experiment by adjusting values.

Learn to add and style text on the html5 canvas by using fill text, setting x and y positions, width, color, font, and alignment, and explore wrapping for multi-line text.

Compare svg and canvas: svg uses scalable vector graphics with event handling, while canvas draws pixels via JavaScript and requires clearing and redrawing for updates, rendering may depend on JavaScript.

Learn how to draw images on an HTML5 canvas from existing HTML images, other canvases, videos, or base64 data, and create images on the fly from scratch.

Pull onpage images into an HTML5 canvas by accessing a DOM image with getElementById, ensuring it loads before drawing, and exploring image scaling and sizing.

Scale images in HTML5 canvas with drawImage and resize image objects using width and height, then create a dynamic, interactive image gallery in JavaScript.

Learn to slice images on the HTML5 canvas by mapping source x, y, width, and height to destination x, y, width, and height, cropping precise image segments and preserving proportions.

Apply a frame to an image on the canvas using a local or Mozilla's demo image, resize the image to fit neatly, and save the canvas as an image.

Learn to add a frame around an image on canvas with ctx.drawImage, handling onload and resizing to fit a 300 by 200 frame by adjusting x, y, width, and height.

Apply save and restore to manage canvas states while drawing circles with arc, ctx, and fill, using blue and yellow colors for layered figures.

Discover how the canvas translate transformation moves content by changing coordinates, use save and restore to isolate changes, and apply transforms to individual items or entire groups.

Scale the canvas by setting x and y factors to resize all content. Use save and restore to reset transformations and manage color states within the transformed section.

Learn how to rotate canvas content with the rotate method, using save and restore, translate, and scale to control rotation angles and rotation points with Math.PI for degree calculations.

Apply custom transformations in HTML5 canvas to a green rectangle—horizontal scaling, skewing, and moving. Loop to vary colors and achieve a 3-D look with pre-calculated values.

Learn how to create canvas animations by clearing and drawing frames, using requestAnimationFrame, and wiring a click-driven loop with an onload initialization and a draw function.

Set the canvas width and height, draw a dynamic red circle with ctx.arc and a configurable radius, fill it, and enable click-to-move toward mouse coordinates.

Capture mouse coordinates from canvas clicks and steer the animation toward those x and y positions, logging to verify, and manage drawing with begin path, close path, and restore state.

Learn how to clear the HTML5 canvas with ctx.clearRect and dynamically manage coordinates, enabling interactive dot movement and a looping automated animation frame for canvas effects.

Learn how to capture mouse coordinates on a canvas click and use requestAnimationFrame to create a smooth draw loop that makes a dot chase the cursor.