HTML5 Canvas create 5 Games 5 Projects Learn JavaScript

Learn how to draw paths on the canvas by creating a path, moving to coordinates, and applying stroke and fill to render a red triangle with blue point markers.

Learn to draw circles and arcs on canvas to create a happy-face scene. Use beginPath, arc, moveTo, fill, and stroke to position eyes and a mouth on a yellow background.

animate a red dot moving across a canvas with a blue center dot using a draw function and requestAnimationFrame, and reverse the dot's direction by clicking the canvas.

Set up player movement boundaries on the canvas to keep each player on their side, draw a center line, and prevent crossing while handling left, right, up, and down controls.

Restart the game by resetting scores, cooldowns, and player positions with a start game function triggered on canvas clicks; reset X/Y for players, restart animation frame, and adjust collision detection.

Add an opponent brain using a mind object with a thinking toggle and a toggle button. Enable movement toward the red player with randomized, bounded movement.

Refine opponent movement logic in an HTML5 canvas game. Implement natural left-right and up-down motion with boundary checks and random direction changes, add speed variation, occasional stops, and enable shooting.

Track arrow key presses with a keys object and listen for keydown and keyup events to move a canvas rectangle by updating x and y, clearing the canvas before redraw.

Create a bouncing ball in HTML5 canvas by defining a ball object with x, y, width, height, and speed, then move it and detect collisions with paddles and walls.

Learn to build a bubble popping game on HTML5 canvas using JavaScript, drawing bubbles with arcs, handling mouse clicks, collision detection, and animation with requestAnimationFrame to score points.

Learn to create bubbles on canvas by using radial gradient with two circles, color stops, and gradient fills, then fine-tune stroke and colors for a bubble look.

Generate random bubbles on an HTML5 canvas by looping a bubble count with random x, y, and sizes between 15 and 25, using a gradient-filled arc for each bubble.

Spawn bubbles from the bottom, remove them when they reach the top, and add dynamic speed, horizontal jitter, and random colors for a lively canvas.

Learn to implement bubble collision detection on mouse click in an HTML5 canvas game by comparing bubble x/y positions with the click using the bubble size to detect overlaps.

Perform a final code review of the html5 canvas bubble popper game, adjusting bubble movement, hit circle size, random speed, and scoring for accurate collisions on the canvas.

Set a dynamic enemy total to drop items, spawn enemies at random x positions, store them in an enemies object and array, and render them on the canvas.

Learn to start and restart a canvas game with a clickable button or canvas click, reset scores and lives, and use collision detection with mouse coordinates.

Review the HTML5 canvas catcher game code, adjust enemies, speed, and lives to tune difficulty, manage collision scoring, and clean console messages.

Learn to create a breakout game scaffold by building a blank html file, linking breakout.js, creating an html5 canvas with a 2d context, and sizing from a grid-based game object.

Draw the player paddle on the HTML5 canvas using a draw function for Breakout, and define a dynamic player object with x, y, width, height, and grid-based positioning for movement.

Learn to track player movement in HTML5 canvas by listening for keydown and keyup, updating a keys object with key codes, and preparing for movement-based animation.

Add mouse movement controls by listening for mousemove on the document, mapping event.clientX with canvas.offsetLeft to position the paddle, accounting for paddle width and canvas bounds.

Create a bricks array and start the game to build a 30-brick board. Draw bricks as rectangles positioned by dynamic x and y using grid values.

Update the bottom score and player lives, track game completion, and restart with the up arrow; bricks have random values that increase the score when removed.

Set up a 640 by 480 canvas with a black background in JavaScript. Add input and a download button to draw centered text and export canvas as a data URL.

Learn to build a bouncing ball animation with HTML5 canvas and JavaScript by creating a canvas, drawing a circle with arc, and updating speed for wall bounces.

Learn to create, merge, and update arrays using join, push, apply, and splice. Understand delete versus splice, clearing contents, and how length and memory behave with nested arrays.

Learn how to clean up excess whitespace in strings using regular expressions and the JavaScript trim methods, including trim left and trim right; explore a string prototype cleaner implementation.

Explore immediately invoked function expressions in JavaScript, using both function keyword and arrow syntax, pass arguments, set defaults, and see results in the console.