Intro to Web Graphics with HTML5 Canvas

on YouTube ↗32m

" summary

Shows actual canvas code and demos: uses the Canvas 2D API methods and pixel ImageData, pulls in D3.js for d3.timer animation loop and scales, uses Albers USA projection and topo/GeoJSON for maps, and uses satellite.js to propagate orbits. Demonstrates 10,000 particles with fade trails and compositing modes (multiply/screen), renders a Julia set slowly because canvas is not GPU accelerated, compares SVG vs canvas (SVG fine to ~500–1,000 elements), and implements interaction via a hidden getImageData lookup canvas.

AI-written summary · about

" chapters (17)

1. 0:00Intro
2. 1:04HTML5 Canvas
3. 1:57Why Canvas
4. 2:31Pixels
5. 5:26Canvas Context
6. 7:25Animations
7. 9:19Particle Trails
8. 10:00Live Forms
9. 11:50compositing
10. 14:27data visualization
11. 15:31SVG vs Canvas
12. 17:36Making the map
13. 19:11Coding the satellites
14. 22:20Changing the projection
15. 24:25Interaction with Canvas
16. 24:51Render everything twice
17. 26:45Interactions

" related talks

• 37mPainting with DataRichard Westenra · FrontCon 2019
• 33mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · Vue.js Amsterdam 2019
• 01h 08mThe quest for the graphical webVincent Hardy · Meta Refresh 2013
• 43mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · VueConf TO 2018
• 15mGetting Weird with Video Manipulation and HTML5 CanvasDylan Jhaveri · React Summit 2020
• 26mSVG, Canvas, and WebGL: The Power, the Beauty, and the CostAmber Hoak · CascadiaJS 2020
• 33mRubyist's Guide to the Canvas APIH. Dean Hudson · Cascadia Ruby 2012
• 42mRendering performance from the ground upMartin Splitt · Full Stack Fest 2017