1 Canvas 2D API
<canvas> пиксельный буфер
контекст getContext('2d')
линии кривые растры
2 WebGL
getContext('webgl') webgl2
GPU шейдеры
треугольники буферы текстуры
3 WebGPU
новая GPU система
низкоуровневый доступ к видеокарте
рендер и compute
4 SVG
векторная сцена DOM
<svg> <path> <circle>
скрипт меняет атрибуты
5 CSS painting
рисование через CSS
gradients filters masks
анимация transform
6 DOM элементы
div span
позиционирование
скрипт меняет left top transform
7 CSS Houdini Paint API
кастомный painter
paintWorklet
рисует в CSS background
8 WebGL через OffscreenCanvas
канвас в worker
рендер вне main thread
9 ImageData / pixel buffer
прямое изменение массива пикселей
putImageData
10 Video + WebCodecs
кадры генерируются скриптом
вывод как видео поток
11 WebXR rendering
рендер сцены для VR AR
12 WebAssembly + Canvas/WebGL
рендер код на C C++ Rust
вывод через canvas или webgl
13 CSS clip path / mask генерация
скрипт генерирует форму
CSS её рисует
14 HTML5 <video> как framebuffer
кадры рисуются в canvas
передаются в video
15 Three.js Babylon.js
библиотеки над WebGL WebGPU
📊 Фактически движки рендера браузера
1 raster engine → Canvas
2 vector engine → SVG
3 GPU pipeline → WebGL WebGPU
4 layout engine → DOM CSS
Моя домашняя страница⠀ Главная⠀ Пепельница⠀ Графика в интернете
