Canvas API Courses and Certifications

Meta

Enhancing Netflix's TV Experience with React Beyond the DOM

Netflix's approach to enhancing TV experiences using React without DOM, leveraging canvas-like APIs for improved performance on smart TVs and game consoles.

• YouTube
• 26 minutes
• Self-Paced
• Free Video

Derek Banas

Make JavaScript Asteroids Game

Learn to create the classic Asteroids game using pure JavaScript, covering 3D space movement, collision detection, inertia, and more in this comprehensive tutorial.

• YouTube
• 59 minutes
• Self-Paced
• Free Video

Derek Banas

JavaScript Paint App Tutorial - Part 3

Learn to create a JavaScript Paint App with brush strokes, shapes, and image saving/loading functionality. Enhance your web development skills through hands-on coding of interactive graphics applications.

• YouTube
• 21 minutes
• Self-Paced
• Free Video

Derek Banas

JavaScript Paint App Tutorial - Part 2

Learn to build a JavaScript Paint App: implement toolbar, canvas mouse positions, save/redraw canvas, create rubber band system, find angles, convert radians/degrees, save/import images, and set up event handling.

• YouTube
• 26 minutes
• Self-Paced
• Free Video

Chris Courses

How to Code - Mace Windu's Lightsaber but With Like 10 Other Colors

Learn to create an interactive lightsaber effect using canvas, exploring sine, cosine, and atan2 functions for circular motion and rotation based on mouse position.

• YouTube
• 43 minutes
• Self-Paced
• Free Video

JSConf

Elektroknit

Explore image processing and Canvas API to convert digital graphics into knitted patterns, bridging web engineering with textile design in this innovative craft project.

• YouTube
• 30 minutes
• Self-Paced
• Conference Talk

JSConf

Hacking a HTML Renderer in Plain Browser-Side JS

Explore the challenges and techniques of rendering HTML to canvas using pure JavaScript, delving into browser intricacies and unconventional approaches.

• YouTube
• 21 minutes
• Self-Paced
• Conference Talk

JSConf

A Panoramic Tour Through HTML5 Rendering Itself

Explore the challenges and intricacies of rendering HTML to canvas in JavaScript. Dive into modern browser technologies, uncovering powerful and unconventional techniques along the way.

• YouTube
• 26 minutes
• Self-Paced
• Conference Talk

JSConf

Canvas in Node.js

Explore Node.js canvas capabilities for server-side image generation and manipulation, enhancing web applications with dynamic visual content.

• YouTube
• 21 minutes
• Self-Paced
• Conference Talk

JSConf

The Weird — Yet Practical — World of Paint Worklets

Explore the intersection of art and CSS with paint worklets. Learn how to create programmatic graphics for practical web design applications, blending creativity with functionality.

• YouTube
• 33 minutes
• Self-Paced
• Conference Talk

JSConf

Using a Modern Web to Recreate 1980s Horribly Slow & Loud Loading Screens

Recreate nostalgic 1980s computer loading screens using modern web technologies. Explore Web Audio, Canvas API, and JavaScript to simulate slow, loud, and visually striking retro experiences.

• YouTube
• 30 minutes
• Self-Paced
• Conference Talk

Scrimba

Coding Image Filters with JavaScript, CSS, and HTML

Learn to create an image filter app with HTML, CSS, and JavaScript. Implement various filters, enable image uploads, and add download functionality for a fun, interactive project.

• YouTube
• 1 hour 5 minutes
• Self-Paced
• Free Video

JSConf

JavaScript on Tiny, Wearable Hardware

Explore JavaScript's potential on wearable devices with limited memory, including porting JerryScript to Pebble smartwatch and cross-compiling JS engines for embedded systems.

• YouTube
• 34 minutes
• Self-Paced
• Conference Talk

Chris Courses

Create a Donkey Kong Country-Style Platformer in JavaScript

Learn to build a Donkey Kong-inspired platformer in JavaScript, covering map creation, scrolling, animations, collisions, enemies, scoring, and game mechanics for a complete 2D game development experience.

• YouTube
• 3 hours 54 minutes
• Self-Paced
• Free Video

ng-conf

I Let Strangers Design My Slides Using NgRx Component Store

Explore building a testable Angular drawing app using NgRx Component Store, Canvas API, and Firebase features to crowdsource slide designs for conference talks.

• YouTube
• 19 minutes
• Self-Paced
• Conference Talk