![](http://webcf.waybackmachine.org/web/20211007033408im_/https://habrastorage.org/getpro/habr/avatars/a95/30d/47b/a9530d47be411cc5b23c6088e413db06.jpg)
Как писать на HTML Canvas удобно, или как изобрести очередной renderer на Angular
![](https://webcf.waybackmachine.org/web/20211007033408im_/https://habrastorage.org/getpro/habr/upload_files/392/22d/e54/39222de545d0f32f44e422313eb62d63.png)
Разработка на canvas с контекстом 2D обычно не предполагает никаких сложностей. Для начала необходимо изучить пару десятков встроенных методов WEB API CanvasRenderingContext2D, прочитать рекомендации по оптимизации, вспомнить школьный курс геометрии. И на этих базовых вещах можно уже строить неплохие приложения на canvas.
Как один из вариантов начала разработки на canvas: из примитивов фигур строят элементы, затем их объединяют в функцию, эти функции складывают в готовый элемент, объединяют их в слой, ну и в конце уже отдают в функцию рендера. Все еще звучит довольно неплохо и с этим можно даже жить, если использовать чистые функции, и придерживаться везде этого подхода. Но не всегда этого удается, всегда есть соблазн выхватить что-либо из контекста. Для примера приведу код из source-map-vizualization замечательный инструмент, сделанный на canvas. Только чтобы понять весь код и привнести какие либо исправления, я думаю придется посидеть не один час.