Building HTML5 Canvas projects from scratch

Learn to set up a blank HTML5 canvas, add a border for visibility, connect a script, and prep for an animated ball that bounces in canvas.

Connect the canvas, obtain the 2d context as ctx, set canvas size, and create a ball object with x and y starting at ball size plus five and speed five.

Create a draw function to render the ball on the canvas by calculating its x, y, and radius, then draw the circle with a path; lessons add movement and bouncing.

Learn to animate a ball on an HTML5 canvas by creating a move ball function that updates position and draws, using requestAnimationFrame to loop and clear the screen each frame.

Apply boundary logic to a canvas animation by flipping the ball’s direction when it hits the edges, using separate move and draw functions, with random size changes and console logging.

Learn to generate a random hexadecimal color with math random and substring, then apply it to the canvas fill style as the ball bounces.

Learn to enhance a bouncing ball on an HTML5 canvas by applying shadows, creating radial gradients, and color stops for dynamic shading.

Learn to set up an HTML5 canvas drawing app with Bootstrap controls, including a canvas, color picker, brush size slider, and save and clear buttons to render drawings as images.

Define and initialize canvas properties and drawing state, including mouse position objects, drawing toggle, color, and pen width, then prepare button listeners to enable canvas drawing.

Attach listeners to color and range inputs and buttons to connect values to the canvas. Create functions like fColor, fSave, and fClear, and add drawing listeners for mouse and canvas.

Attach canvas mouse listeners for move, down, and up and draw with coordinates computed from pageX and pageY minus offset left and top.

Learn to draw on the canvas with paths and lines by handling mouse events, beginning paths, moving to coordinates, and stroking lines.

Enable dynamic stroke color and line width for canvas drawing with a color picker and range input, updating draw color and width in real time.

Practice clearing the canvas with a confirmation prompt, resetting the drawing area by clearing the canvas and redrawing the default state, and preparing for saving the image later.

Generate a base64 image from canvas content and set it as an image source to display the updated canvas drawing inline, illustrating how canvas data becomes a reusable image.

Adjust the HTML5 canvas project by wiring the slider to its initial value, realigning layout and stroke width, resizing the canvas to 400, and outlining future server-side base64 image storage.

Use jQuery to send ajax with base64 canvas data to a PHP server, saving drawings permanently to an images folder on localhost.

Learn to send image data via Ajax to a PHP backend, decode base64 data, and save the resulting image on the server for on-the-fly HTML5 canvas image creation.

Create brand new images on the fly from canvas data using ajax to send to php, decode, and save on the server with string fixes and unique names.

The lecture walks through including the project source code, drawing on a canvas with mouse input, and saving the result via ajax to a PHP server with unique filenames.

Set the canvas cursor to a pointer when hovering and while pressing down by updating canvas.style.cursor in JavaScript, making interaction more user friendly.