[{"data":1,"prerenderedAt":347},["ShallowReactive",2],{"wAFWpkiVpS":3},[4],{"id":5,"date":6,"date_gmt":7,"guid":8,"modified":10,"modified_gmt":11,"slug":12,"status":13,"type":14,"link":15,"title":16,"content":18,"excerpt":21,"author":23,"featured_media":24,"comment_status":25,"ping_status":25,"sticky":20,"template":26,"format":27,"meta":28,"categories":29,"tags":31,"class_list":32,"acf":40,"yoast_head":41,"yoast_head_json":42,"featured_media_src_url":137,"_links":138,"_embedded":186},1548,"2025-06-01T16:21:36","2025-06-01T13:21:36",{"rendered":9},"https://api.aoskin.ru/?p=1548","2025-07-25T22:35:34","2025-07-25T19:35:34","web-canvas-api-osnovnye-vozmozhnosti-i-fishki","publish","post","https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/",{"rendered":17},"Web Canvas API: основные возможности и фишки",{"rendered":19,"protected":20},"\n\u003Ch2 class=\"wp-block-heading\">Что такое Canvas API?\u003C/h2>\n\n\n\n\u003Cp>\u003Cstrong>Canvas API\u003C/strong> &#8211; это технология в HTML5, которая позволяет рисовать графику на странице прямо из JavaScript. Она работает с \u003Ccode>&lt;canvas>\u003C/code> &#8211; HTML-элементом, который создаёт растровое поле, над которым имеется полный контроль.\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-html\" data-lang=\"HTML\">\u003Ccode>&lt;canvas id=&quot;canvas&quot; width=&quot;600&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>JavaScript подключается к этому элементу \u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>const canvas = document.getElementById(&#39;canvas&#39;);\nconst ctx = canvas.getContext(&#39;2d&#39;);\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Как работает Canvas?\u003C/h2>\n\n\n\n\u003Cp>Элемент \u003Ccode>&lt;canvas&gt;\u003C/code> создаёт область фиксированного размера, предназначенную для рисования. Эта область может использовать один из доступных \u003Cstrong>контекстов рендеринга\u003C/strong>, которые отвечают за отображение графики и позволяют ею управлять.\u003C/p>\n\n\n\n\u003Cp>По умолчанию холст пуст и прозрачен. Чтобы начать рисовать, необходимо получить \u003Cstrong>контекст\u003C/strong> с помощью метода \u003Ccode>getContext()\u003C/code>, который принимает один аргумент &#8211; тип нужного контекста:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>'2d'\u003C/code> &#8211; стандартный \u003Cstrong>двухмерный контекст\u003C/strong> для рисования в плоскости;\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>'webgl'\u003C/code> &#8211; \u003Cstrong>трёхмерный контекст\u003C/strong>, основанный на WebGL 1.0 (аналог OpenGL ES 2.0);\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>'webgl2'\u003C/code> &#8211; \u003Cstrong>более продвинутый 3D-контекст\u003C/strong> WebGL 2.0 (на базе OpenGL ES 3.0).\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp>В рамках данной статьи рассмотрим \u003Cstrong>контекст &#8216;2d&#8217;\u003C/strong> для работы с двумерной графикой.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Основные функции 2D Canvas API\u003C/h2>\n\n\n\n\u003Cp>В canvas поддерживается одна примитивная фигура &#8211; прямоугольник, другие фигуры рисуются при помощи контуров (\u003Cstrong>paths\u003C/strong>)&nbsp;&#8211; набором точек, соединённых в&nbsp;линии. В контурах есть функции, с&nbsp;помощью которых можно составлять сложные и разнообразные фигуры.\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>fillRect(x, y, width, height)\u003C/code> &#8211; Рисует закрашенный прямоугольник\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>strokeRect(x, y, \u003Ccode>width, height\u003C/code>)\u003C/code> &#8211; Рисует рамку прямоугольника\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>beginPath()\u003C/code> / \u003Ccode>closePath()\u003C/code> &#8211; Начало и завершение пути\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>moveTo(x, y)\u003C/code> / \u003Ccode>lineTo(x, y)\u003C/code> &#8211; Рисует линии\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>arc(x, y, r, sAngle, eAngle)\u003C/code> &#8211; Рисует дугу/круг\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>drawImage(img, x, y)\u003C/code> &#8211; Рисует изображение\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>fillText(text, x, y)\u003C/code> &#8211; Рисует текст\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>setTransform(...)\u003C/code> &#8211; Преобразования (масштаб, поворот, сдвиг)\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Прямоугольник в&nbsp;canvas:\u003C/h2>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>fillRect(x, y, width, height)\u003C/code>&nbsp;&#8211; закрашенный прямоугольник\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>strokeRect(x, y, width, height)\u003C/code>&nbsp;&#8211; рамка прямоугольника\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>ctx.fillRect(150, 20, 100, 100);\nctx.strokeRect(0, 20, 100, 100); \u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>Каждая из этих функций принимает набор параметров:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>\u003Cstrong>x\u003C/strong>\u003C/code> и \u003Ccode>\u003Cstrong>y\u003C/strong>\u003C/code> задают координаты верхнего левого угла прямоугольника относительно начала системы координат;\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>\u003Cstrong>width\u003C/strong>\u003C/code> и \u003Ccode>\u003Cstrong>height\u003C/strong>\u003C/code> определяют ширину и высоту фигуры соответственно.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full is-resized\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"684\" height=\"314\" src=\"https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-1.webp\" alt=\"\" class=\"wp-image-1560\" style=\"width:351px;height:auto\" srcset=\"https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-1.webp 684w, https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-1-300x138.webp 300w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" />\u003C/figure>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Построение контура в Canvas API\u003C/h2>\n\n\n\n\u003Cp>Создание фигуры начинается с вызова метода \u003Ccode>\u003Cstrong>beginPath()\u003C/strong>\u003C/code>. Он инициализирует новый путь, сбрасывая предыдущие данные. Это позволяет начать рисование с чистого листа. Контур, который будет создан, может включать в себя различные сегменты &#8211; прямые линии, дуги, кривые и другие формы.\u003C/p>\n\n\n\n\u003Cp>Следующим этапом добавляются нужные элементы в путь с помощью методов, описывающих геометрию фигуры (например, \u003Cstrong>\u003Ccode>lineTo\u003C/code>, \u003Ccode>arc\u003C/code>, \u003Ccode>moveTo\u003C/code>\u003C/strong> и т.д.). Именно они определяют форму будущего рисунка.\u003C/p>\n\n\n\n\u003Cp>Опционально можно завершить контур вызовом \u003Ccode>\u003Cstrong>closePath()\u003C/strong>\u003C/code>. Эта функция соединяет последнюю точку с начальной, замыкая фигуру. Если контур уже замкнут или построен из одной точки, метод не окажет эффекта.\u003C/p>\n\n\n\n\u003Cp>Если вы используете \u003Ccode>\u003Cstrong>fill()\u003C/strong>\u003C/code>, фигура автоматически будет считаться замкнутой, даже без \u003Ccode>\u003Cstrong>closePath()\u003C/strong>\u003C/code>. Однако при использовании \u003Ccode>\u003Cstrong>stroke()\u003C/strong>\u003C/code> (обводки), явное замыкание необходимо, если вы хотите, чтобы контур был полностью очерчен.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Работа с линиями\u003C/h2>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>const canvas = document.getElementById(&#39;canvas&#39;);\nconst ctx = canvas.getContext(&#39;2d&#39;);\nctx.strokeStyle = &#39;lightblue&#39;;\nctx.fillStyle = &#39;lightblue&#39;;\n\nctx.beginPath();\nctx.moveTo(30, 30);\nctx.lineTo(130, 30);\nctx.lineTo(130, 130);\nctx.fill();\n\nctx.beginPath();\nctx.moveTo(160, 130);\nctx.lineTo(180, 60);\nctx.lineTo(260, 60);\nctx.lineTo(280, 130);\nctx.closePath();\nctx.stroke();  \u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>Первая фигура &#8211; \u003Cstrong>Прямоугольный треугольник с заливкой\u003C/strong>:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>beginPath()\u003C/code> &#8211; начинается новый путь.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>moveTo(30, 30)\u003C/code> &#8211; устанавливается начальная точка.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>lineTo(130, 30)\u003C/code> &#8211; рисуется верхняя горизонтальная сторона.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>lineTo(130, 130)\u003C/code> &#8211; рисуется правая вертикальная сторона.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>fill()\u003C/code> &#8211; заливает фигуру светло-красным цветом, автоматически замыкая контур.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp>Вторая фигура &#8211; \u003Cstrong>Трапеция с обводкой\u003C/strong>:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>beginPath()\u003C/code> &#8211; начинается новый путь.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>moveTo(160, 130)\u003C/code> &#8211; стартовая точка (нижний левый угол).\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>lineTo(180, 60)\u003C/code> &#8211; левая верхняя сторона.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>lineTo(260, 60)\u003C/code> &#8211; правая верхняя сторона.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>lineTo(280, 130)\u003C/code> &#8211; нижний правый угол.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>closePath()\u003C/code> &#8211; замыкает фигуру (соединяет обратно с первой точкой).\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>stroke()\u003C/code> &#8211; обводит фигуру синим цветом без заливки.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full is-resized\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"708\" height=\"400\" src=\"https://api.aoskin.ru/wp-content/uploads/2025/05/web-canvas-api-1.webp\" alt=\"\" class=\"wp-image-1555\" style=\"width:423px;height:auto\" srcset=\"https://api.aoskin.ru/wp-content/uploads/2025/05/web-canvas-api-1.webp 708w, https://api.aoskin.ru/wp-content/uploads/2025/05/web-canvas-api-1-300x169.webp 300w\" sizes=\"auto, (max-width: 708px) 100vw, 708px\" />\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">Пример полукруга\u003C/h3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>const canvas = document.getElementById(&#39;canvas&#39;);\nconst ctx = canvas.getContext(&#39;2d&#39;);\n  \nctx.beginPath();\nctx.arc(200, 125, 80, 0, Math.PI, false);\nctx.lineTo(120, 125);\nctx.closePath();\nctx.fillStyle = &#39;lightblue&#39;;\nctx.fill();\nctx.strokeStyle = &#39;lightblue&#39;;\nctx.lineWidth = 1;\nctx.stroke();\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>ctx.arc()\u003C/code> &#8211; рисует верхнюю половину круга (от 0 до пи).\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>ctx.lineTo()\u003C/code> &#8211; соединяет конец дуги с начальной точкой по прямой.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>ctx.closePath()\u003C/code> &#8211; автоматически соединяет обратно к началу.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>ctx.fill()\u003C/code> &#8211; заливает фигуру.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>ctx.stroke()\u003C/code> &#8211; делает обводку.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full is-resized\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"496\" src=\"https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-2.webp\" alt=\"\" class=\"wp-image-1562\" style=\"width:291px;height:auto\" srcset=\"https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-2.webp 662w, https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-2-300x225.webp 300w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" />\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">Пример с применением кривых Безье\u003C/h3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>const canvas = document.getElementById(&#39;canvas&#39;);\nconst ctx = canvas.getContext(&#39;2d&#39;);\n  \nctx.beginPath();\nctx.moveTo(50, 250);\nctx.bezierCurveTo(150, 100, 350, 100, 450, 250);\nctx.strokeStyle = &#39;blue&#39;;\nctx.lineWidth = 3;\nctx.stroke();\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>ctx.moveTo(50, 250)\u003C/code> &#8211; стартовая точка.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>ctx.bezierCurveTo(150, 100, 350, 100, 450, 250)\u003C/code> &#8211; кривая от начальной до (450, 250), управляемая двумя контрольными точками.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full is-resized\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"988\" height=\"608\" src=\"https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-3.webp\" alt=\"\" class=\"wp-image-1563\" style=\"width:294px;height:auto\" srcset=\"https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-3.webp 988w, https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-3-300x185.webp 300w, https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-3-768x473.webp 768w\" sizes=\"auto, (max-width: 988px) 100vw, 988px\" />\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">Пример рисования текста\u003C/h3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>const canvas = document.getElementById(&#39;canvas&#39;);\nconst ctx = canvas.getContext(&#39;2d&#39;);\n\nctx.font = &quot;bold 6rem Arial&quot;;\nctx.fillText(&quot;Hello canvas&quot;, 10, 70);\nctx.strokeText(&quot;Hello canvas&quot;, 10, 160);\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Ccode>ctx.font\u003C/code> &#8211; задаёт стиль и размер шрифта.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>ctx.fillText(text, x, y)\u003C/code> &#8211; рисует залитый текст.\u003C/li>\n\n\n\n\u003Cli>\u003Ccode>ctx.strokeText(text, x, y)\u003C/code> &#8211; рисует контур текста.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cfigure class=\"wp-block-image size-large is-resized\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"343\" src=\"https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-4-1024x343.webp\" alt=\"\" class=\"wp-image-1564\" style=\"width:361px;height:auto\" srcset=\"https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-4-1024x343.webp 1024w, https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-4-300x100.webp 300w, https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-4-768x257.webp 768w, https://api.aoskin.ru/wp-content/uploads/2025/06/web-api-canvas-4.webp 1272w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" />\u003C/figure>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Новое и важное в 2025\u003C/h2>\n\n\n\n\u003Cp>\u003Cstrong>1.\u003C/strong> \u003Cstrong>\u003Ccode>OffscreenCanvas\u003C/code>\u003C/strong> (теперь с поддержкой во всех актуальных браузерах)\u003C/p>\n\n\n\n\u003Cp>Позволяет выполнять отрисовку в Web Worker &#8211; это разгружает основной поток и делает анимации плавнее:\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>const offscreen = canvas.transferControlToOffscreen();\nworker.postMessage({ canvas: offscreen }, [offscreen]);\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>2.\u003C/strong> \u003Cstrong>\u003Ccode>context.filter\u003C/code>\u003C/strong> &#8211; CSS-фильтры в Canvas\u003C/p>\n\n\n\n\u003Cp>Теперь можно применять \u003Ccode>blur\u003C/code>, \u003Ccode>brightness\u003C/code>, \u003Ccode>contrast\u003C/code>, \u003Ccode>drop-shadow\u003C/code> и другие фильтры:\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>ctx.filter = &#39;blur(4px) brightness(1.2)&#39;;\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>3.\u003C/strong> \u003Cstrong>\u003Ccode>imageSmoothingQuality\u003C/code>\u003C/strong> &#8211; улучшенная интерполяция\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>ctx.imageSmoothingEnabled = true;\nctx.imageSmoothingQuality = &#39;high&#39;; // &#39;low&#39;, &#39;medium&#39;, &#39;high&#39;\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>4.\u003C/strong> \u003Cstrong>Canvas to Blob (Promise)\u003C/strong>\u003C/p>\n\n\n\n\u003Cp>Современный \u003Ccode>canvas.toBlob()\u003C/code> теперь работает с промисами (где поддерживается):\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>const blob = await canvas.convertToBlob({ type: &#39;image/png&#39; });\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Как улучшить производительность\u003C/h2>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Используем \u003Ccode>requestAnimationFrame()\u003C/code> для анимаций.\u003C/li>\n\n\n\n\u003Cli>Применяем \u003Ccode>OffscreenCanvas\u003C/code> для больших сцен.\u003C/li>\n\n\n\n\u003Cli>Не забываем очищать \u003Ccode>canvas\u003C/code> при каждой перерисовке: \u003Ccode>ctx.clearRect(0, 0, width, height)\u003C/code>.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Заключение\u003C/h2>\n\n\n\n\u003Cp>Canvas API &#8211; инструмент для создания графики прямо в браузере. Он позволяет рисовать фигуры, текст, изображения, анимации и даже 3D-сцены с помощью WebGL. Благодаря простому доступу через \u003Ccode>getContext()\u003C/code> и большому количеству встроенных методов, можно реализовать как базовую 2D-графику, так и сложные визуализации.\u003C/p>\n",false,{"rendered":22,"protected":20},"\u003Cp>Canvas API остаётся мощным инструментом для создания 2D-графики, визуализаций, игр и UI-анимаций прямо в браузере. За последние годы API получил важные обновления, улучшающие производительность, качество отрисовки и возможности управления изображениями.\u003C/p>\n",1,1567,"open","","standard",{"_acf_changed":20,"footnotes":26},[30],20,[],[33,14,34,35,36,37,38,39],"post-1548","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webapi",[],"\u003C!-- This site is optimized with the Yoast SEO plugin v26.6 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Ctitle>Web Canvas API: основные возможности и фишки\u003C/title>\n\u003Cmeta name=\"description\" content=\"- Canvas API остаётся мощным инструментом для создания 2D-графики, визуализаций, игр и UI-анимаций прямо в браузере.\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"article\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"Web Canvas API: основные возможности и фишки\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:description\" content=\"- Canvas API остаётся мощным инструментом для создания 2D-графики, визуализаций, игр и UI-анимаций прямо в браузере.\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"article:published_time\" content=\"2025-06-01T13:21:36+00:00\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2025-07-25T19:35:34+00:00\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:image\" content=\"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas.webp\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:width\" content=\"1456\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:height\" content=\"816\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:type\" content=\"image/webp\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"author\" content=\"aoskin\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Written by\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:data1\" content=\"aoskin\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:label2\" content=\"Est. reading time\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:data2\" content=\"4 minutes\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#article\",\"isPartOf\":{\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/\"},\"author\":{\"name\":\"aoskin\",\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"headline\":\"Web Canvas API: основные возможности и фишки\",\"datePublished\":\"2025-06-01T13:21:36+00:00\",\"dateModified\":\"2025-07-25T19:35:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/\"},\"wordCount\":616,\"commentCount\":0,\"publisher\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"image\":{\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#primaryimage\"},\"thumbnailUrl\":\"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas.webp\",\"articleSection\":[\"Web API\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/\",\"url\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/\",\"name\":\"Web Canvas API: основные возможности и фишки\",\"isPartOf\":{\"@id\":\"https://api.aoskin.ru/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#primaryimage\"},\"image\":{\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#primaryimage\"},\"thumbnailUrl\":\"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas.webp\",\"datePublished\":\"2025-06-01T13:21:36+00:00\",\"dateModified\":\"2025-07-25T19:35:34+00:00\",\"description\":\"- Canvas API остаётся мощным инструментом для создания 2D-графики, визуализаций, игр и UI-анимаций прямо в браузере.\",\"breadcrumb\":{\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#primaryimage\",\"url\":\"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas.webp\",\"contentUrl\":\"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas.webp\",\"width\":1456,\"height\":816},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://api.aoskin.ru/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Canvas API: основные возможности и фишки\"}]},{\"@type\":\"WebSite\",\"@id\":\"https://api.aoskin.ru/#website\",\"url\":\"https://api.aoskin.ru/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://api.aoskin.ru/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\",\"url\":\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"contentUrl\":\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\"},\"sameAs\":[\"http://api.aoskin.ru\"],\"url\":\"https://api.aoskin.ru/author/aoskin/\"}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":17,"description":43,"robots":44,"canonical":15,"og_locale":50,"og_type":51,"og_title":17,"og_description":43,"og_url":15,"og_site_name":52,"article_published_time":53,"article_modified_time":54,"og_image":55,"author":61,"twitter_card":62,"twitter_misc":63,"schema":65},"- Canvas API остаётся мощным инструментом для создания 2D-графики, визуализаций, игр и UI-анимаций прямо в браузере.",{"index":45,"follow":46,"max-snippet":47,"max-image-preview":48,"max-video-preview":49},"index","follow","max-snippet:-1","max-image-preview:large","max-video-preview:-1","en_US","article","api.aoskin.ru","2025-06-01T13:21:36+00:00","2025-07-25T19:35:34+00:00",[56],{"width":57,"height":58,"url":59,"type":60},1456,816,"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas.webp","image/webp","aoskin","summary_large_image",{"Written by":61,"Est. reading time":64},"4 minutes",{"@context":66,"@graph":67},"https://schema.org",[68,89,101,103,112,126],{"@type":69,"@id":70,"isPartOf":71,"author":72,"headline":17,"datePublished":53,"dateModified":54,"mainEntityOfPage":74,"wordCount":75,"commentCount":76,"publisher":77,"image":78,"thumbnailUrl":59,"articleSection":80,"inLanguage":82,"potentialAction":83},"Article","https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#article",{"@id":15},{"name":61,"@id":73},"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861",{"@id":15},616,0,{"@id":73},{"@id":79},"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#primaryimage",[81],"Web API","en-US",[84],{"@type":85,"name":86,"target":87},"CommentAction","Comment",[88],"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#respond",{"@type":90,"@id":15,"url":15,"name":17,"isPartOf":91,"primaryImageOfPage":93,"image":94,"thumbnailUrl":59,"datePublished":53,"dateModified":54,"description":43,"breadcrumb":95,"inLanguage":82,"potentialAction":97},"WebPage",{"@id":92},"https://api.aoskin.ru/#website",{"@id":79},{"@id":79},{"@id":96},"https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/#breadcrumb",[98],{"@type":99,"target":100},"ReadAction",[15],{"@type":102,"inLanguage":82,"@id":79,"url":59,"contentUrl":59,"width":57,"height":58},"ImageObject",{"@type":104,"@id":96,"itemListElement":105},"BreadcrumbList",[106,110],{"@type":107,"position":23,"name":108,"item":109},"ListItem","Home","https://api.aoskin.ru/",{"@type":107,"position":111,"name":17},2,{"@type":113,"@id":92,"url":109,"name":114,"description":26,"publisher":115,"alternateName":114,"potentialAction":116,"inLanguage":82},"WebSite","aoskin.ru",{"@id":73},[117],{"@type":118,"target":119,"query-input":122},"SearchAction",{"@type":120,"urlTemplate":121},"EntryPoint","https://api.aoskin.ru/?s={search_term_string}",{"@type":123,"valueRequired":124,"valueName":125},"PropertyValueSpecification",true,"search_term_string",{"@type":127,"@id":73,"name":61,"image":130,"logo":133,"sameAs":134,"url":136},[128,129],"Person","Organization",{"@type":102,"inLanguage":82,"@id":131,"url":132,"contentUrl":132,"caption":61},"https://api.aoskin.ru/#/schema/person/image/","https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g",{"@id":131},[135],"http://api.aoskin.ru","https://api.aoskin.ru/author/aoskin/","https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas-1024x574.webp",{"self":139,"collection":149,"about":152,"author":155,"replies":158,"version-history":161,"predecessor-version":165,"wp:featuredmedia":169,"wp:attachment":172,"wp:term":175,"curies":182},[140],{"href":141,"targetHints":142},"https://api.aoskin.ru/wp-json/wp/v2/posts/1548",{"allow":143},[144,145,146,147,148],"GET","POST","PUT","PATCH","DELETE",[150],{"href":151},"https://api.aoskin.ru/wp-json/wp/v2/posts",[153],{"href":154},"https://api.aoskin.ru/wp-json/wp/v2/types/post",[156],{"embeddable":124,"href":157},"https://api.aoskin.ru/wp-json/wp/v2/users/1",[159],{"embeddable":124,"href":160},"https://api.aoskin.ru/wp-json/wp/v2/comments?post=1548",[162],{"count":163,"href":164},15,"https://api.aoskin.ru/wp-json/wp/v2/posts/1548/revisions",[166],{"id":167,"href":168},1653,"https://api.aoskin.ru/wp-json/wp/v2/posts/1548/revisions/1653",[170],{"embeddable":124,"href":171},"https://api.aoskin.ru/wp-json/wp/v2/media/1567",[173],{"href":174},"https://api.aoskin.ru/wp-json/wp/v2/media?parent=1548",[176,179],{"taxonomy":177,"embeddable":124,"href":178},"category","https://api.aoskin.ru/wp-json/wp/v2/categories?post=1548",{"taxonomy":180,"embeddable":124,"href":181},"post_tag","https://api.aoskin.ru/wp-json/wp/v2/tags?post=1548",[183],{"name":184,"href":185,"templated":124},"wp","https://api.w.org/{rel}",{"author":187,"wp:featuredmedia":236,"wp:term":297},[188],{"id":23,"name":61,"url":135,"description":26,"link":136,"slug":61,"avatar_urls":189,"yoast_head":192,"yoast_head_json":193,"acf":227,"_links":228},{"24":190,"48":191,"96":132},"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=24&d=mm&r=g","https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=48&d=mm&r=g","\u003C!-- This site is optimized with the Yoast SEO plugin v26.6 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Ctitle>aoskin, Author at api.aoskin.ru\u003C/title>\n\u003C!-- Admin only notice: this page does not show a meta description because it does not have one, either write it for this page specifically or go into the [Yoast SEO - Settings] menu and set up a template. -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/author/aoskin/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"profile\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"aoskin, Author at api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/author/aoskin/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:image\" content=\"https://secure.gravatar.com/avatar/2facb94fc7068b47efc88c943d1949fc?s=500&d=mm&r=g\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"ProfilePage\",\"@id\":\"https://api.aoskin.ru/author/aoskin/\",\"url\":\"https://api.aoskin.ru/author/aoskin/\",\"name\":\"aoskin, Author at api.aoskin.ru\",\"isPartOf\":{\"@id\":\"https://api.aoskin.ru/#website\"},\"breadcrumb\":{\"@id\":\"https://api.aoskin.ru/author/aoskin/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://api.aoskin.ru/author/aoskin/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://api.aoskin.ru/author/aoskin/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://api.aoskin.ru/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Archives for aoskin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https://api.aoskin.ru/#website\",\"url\":\"https://api.aoskin.ru/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://api.aoskin.ru/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\",\"url\":\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"contentUrl\":\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\"},\"sameAs\":[\"http://api.aoskin.ru\"],\"mainEntityOfPage\":{\"@id\":\"https://api.aoskin.ru/author/aoskin/\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":194,"robots":195,"canonical":136,"og_locale":50,"og_type":196,"og_title":194,"og_url":136,"og_site_name":52,"og_image":197,"twitter_card":62,"schema":200},"aoskin, Author at api.aoskin.ru",{"index":45,"follow":46,"max-snippet":47,"max-image-preview":48,"max-video-preview":49},"profile",[198],{"url":199,"type":26,"width":26,"height":26},"https://secure.gravatar.com/avatar/2facb94fc7068b47efc88c943d1949fc?s=500&d=mm&r=g",{"@context":66,"@graph":201},[202,210,215,221],{"@type":203,"@id":136,"url":136,"name":194,"isPartOf":204,"breadcrumb":205,"inLanguage":82,"potentialAction":207},"ProfilePage",{"@id":92},{"@id":206},"https://api.aoskin.ru/author/aoskin/#breadcrumb",[208],{"@type":99,"target":209},[136],{"@type":104,"@id":206,"itemListElement":211},[212,213],{"@type":107,"position":23,"name":108,"item":109},{"@type":107,"position":111,"name":214},"Archives for aoskin",{"@type":113,"@id":92,"url":109,"name":114,"description":26,"publisher":216,"alternateName":114,"potentialAction":217,"inLanguage":82},{"@id":73},[218],{"@type":118,"target":219,"query-input":220},{"@type":120,"urlTemplate":121},{"@type":123,"valueRequired":124,"valueName":125},{"@type":222,"@id":73,"name":61,"image":223,"logo":224,"sameAs":225,"mainEntityOfPage":226},[128,129],{"@type":102,"inLanguage":82,"@id":131,"url":132,"contentUrl":132,"caption":61},{"@id":131},[135],{"@id":136},[],{"self":229,"collection":233},[230],{"href":157,"targetHints":231},{"allow":232},[144,145,146,147,148],[234],{"href":235},"https://api.aoskin.ru/wp-json/wp/v2/users",[237],{"id":24,"date":238,"slug":239,"type":240,"link":241,"title":242,"author":23,"featured_media":76,"acf":243,"caption":244,"alt_text":26,"media_type":245,"mime_type":60,"media_details":246,"source_url":59,"_links":277},"2025-06-08T16:31:10","37-web-api-canvas","attachment","https://api.aoskin.ru/web-canvas-api-osnovnye-vozmozhnosti-i-fishki/37-web-api-canvas/",{"rendered":239},[],{"rendered":26},"image",{"width":57,"height":58,"file":247,"filesize":248,"sizes":249,"image_meta":274},"2025/06/37-web-api-canvas.webp",100080,{"medium":250,"large":256,"thumbnail":261,"medium_large":266,"full":272},{"file":251,"width":252,"height":253,"filesize":254,"mime_type":60,"source_url":255},"37-web-api-canvas-300x168.webp",300,168,11748,"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas-300x168.webp",{"file":257,"width":258,"height":259,"filesize":260,"mime_type":60,"source_url":137},"37-web-api-canvas-1024x574.webp",1024,574,78404,{"file":262,"width":263,"height":263,"filesize":264,"mime_type":60,"source_url":265},"37-web-api-canvas-150x150.webp",150,5588,"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas-150x150.webp",{"file":267,"width":268,"height":269,"filesize":270,"mime_type":60,"source_url":271},"37-web-api-canvas-768x430.webp",768,430,52634,"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas-768x430.webp",{"file":273,"width":57,"height":58,"mime_type":60,"source_url":59},"37-web-api-canvas.webp",{"aperture":275,"credit":26,"camera":26,"caption":26,"created_timestamp":275,"copyright":26,"focal_length":275,"iso":275,"shutter_speed":275,"title":26,"orientation":275,"keywords":276},"0",[],{"self":278,"collection":282,"about":285,"author":288,"replies":290,"wp:attached-to":293,"curies":295},[279],{"href":171,"targetHints":280},{"allow":281},[144,145,146,147,148],[283],{"href":284},"https://api.aoskin.ru/wp-json/wp/v2/media",[286],{"href":287},"https://api.aoskin.ru/wp-json/wp/v2/types/attachment",[289],{"embeddable":124,"href":157},[291],{"embeddable":124,"href":292},"https://api.aoskin.ru/wp-json/wp/v2/comments?post=1567",[294],{"embeddable":124,"post_type":14,"id":5,"href":141},[296],{"name":184,"href":185,"templated":124},[298,346],[299],{"id":30,"link":300,"name":81,"slug":301,"taxonomy":177,"yoast_head":302,"yoast_head_json":303,"acf":328,"_links":329},"https://api.aoskin.ru/category/webapi/","webapi","\u003C!-- This site is optimized with the Yoast SEO plugin v26.6 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Ctitle>Web API Archives - api.aoskin.ru\u003C/title>\n\u003C!-- Admin only notice: this page does not show a meta description because it does not have one, either write it for this page specifically or go into the [Yoast SEO - Settings] menu and set up a template. -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/category/webapi/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"article\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"Web API Archives - api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/category/webapi/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"CollectionPage\",\"@id\":\"https://api.aoskin.ru/category/webapi/\",\"url\":\"https://api.aoskin.ru/category/webapi/\",\"name\":\"Web API Archives - api.aoskin.ru\",\"isPartOf\":{\"@id\":\"https://api.aoskin.ru/#website\"},\"breadcrumb\":{\"@id\":\"https://api.aoskin.ru/category/webapi/#breadcrumb\"},\"inLanguage\":\"en-US\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://api.aoskin.ru/category/webapi/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://api.aoskin.ru/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https://api.aoskin.ru/#website\",\"url\":\"https://api.aoskin.ru/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://api.aoskin.ru/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\",\"url\":\"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas.webp\",\"contentUrl\":\"https://api.aoskin.ru/wp-content/uploads/2025/06/37-web-api-canvas.webp\",\"width\":1456,\"height\":816,\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\"},\"sameAs\":[\"http://api.aoskin.ru\"]}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":304,"robots":305,"canonical":300,"og_locale":50,"og_type":51,"og_title":304,"og_url":300,"og_site_name":52,"twitter_card":62,"schema":306},"Web API Archives - api.aoskin.ru",{"index":45,"follow":46,"max-snippet":47,"max-image-preview":48,"max-video-preview":49},{"@context":66,"@graph":307},[308,313,317,323],{"@type":309,"@id":300,"url":300,"name":304,"isPartOf":310,"breadcrumb":311,"inLanguage":82},"CollectionPage",{"@id":92},{"@id":312},"https://api.aoskin.ru/category/webapi/#breadcrumb",{"@type":104,"@id":312,"itemListElement":314},[315,316],{"@type":107,"position":23,"name":108,"item":109},{"@type":107,"position":111,"name":81},{"@type":113,"@id":92,"url":109,"name":114,"description":26,"publisher":318,"alternateName":114,"potentialAction":319,"inLanguage":82},{"@id":73},[320],{"@type":118,"target":321,"query-input":322},{"@type":120,"urlTemplate":121},{"@type":123,"valueRequired":124,"valueName":125},{"@type":324,"@id":73,"name":61,"image":325,"logo":326,"sameAs":327},[128,129],{"@type":102,"inLanguage":82,"@id":131,"url":59,"contentUrl":59,"width":57,"height":58,"caption":61},{"@id":131},[135],[],{"self":330,"collection":335,"about":338,"wp:post_type":341,"curies":344},[331],{"href":332,"targetHints":333},"https://api.aoskin.ru/wp-json/wp/v2/categories/20",{"allow":334},[144,145,146,147,148],[336],{"href":337},"https://api.aoskin.ru/wp-json/wp/v2/categories",[339],{"href":340},"https://api.aoskin.ru/wp-json/wp/v2/taxonomies/category",[342],{"href":343},"https://api.aoskin.ru/wp-json/wp/v2/posts?categories=20",[345],{"name":184,"href":185,"templated":124},[],1766752309606]