CanvasRenderingContext2D.closePath()

CanvasRenderingContext2D.closePath() - метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.

Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как stroke() и fill().

Синтаксис

void ctx.closePath();

Примеры

Замкнутый треугольник

В этом примере создаются две первые линии  сторон треугольника с испоьзованием метода lineTo(). После чего метод closePath() заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).

HTML

<canvas id="canvas"></canvas>

JavaScript

Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 140);   // Двигает перо к нижнему левому углу
ctx.lineTo(120, 10);   // Рисует линию к верхнему углу
ctx.lineTo(220, 140);  // Рисует линию к нижнему правому углу
ctx.closePath();       // Рисует линию к нижнему левому углу
ctx.stroke();

Результат

Закрытие пути один раз

Этот пример рисует смайлик, состоящий из трех не соединенных дуг (под путей).

Хотя closePath() вызывается после создания всех дуг, закрывается только последняя.

HTML

<canvas id="canvas"></canvas>

JavaScript

Первые две дуги создают глаза, последняя создает рот.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();

Результат

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.closePath' в этой спецификации.
Живой стандарт  

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
closePathChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 11.6Safari Полная поддержка 2WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 12Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка

Смотрите также