HTTP/2 301
server: nginx
date: Wed, 23 Jul 2025 02:31:35 GMT
content-type: text/html
content-length: 162
location: https://developer.mozilla.org/en-US/docs/Web/API/Path2D
strict-transport-security: max-age=60; includeSubDomains
via: 1.1 google
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
HTTP/2 200
content-type: text/html
x-guploader-uploadid: ABgVH8--r8od1cjzVicCX_vi6RDo2MVTv-BUtoFnnHaCFAlfAZ1lOXEL1n3TzvdlOh_-k3A0AR21imU
cache-control: public, max-age=3600
expires: Wed, 23 Jul 2025 03:31:35 GMT
last-modified: Wed, 23 Jul 2025 00:45:55 GMT
etag: W/"37d257b8d99cb3d6ac5b27201f6e1262"
x-goog-generation: 1753231555496579
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 61510
x-goog-meta-goog-reserved-file-mtime: 1753230314
x-goog-hash: crc32c=OMoJog==, md5=N9JXuNmcs9asWycgH24SYg==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-EehWlTYp7Bqy57gDeQttaWKp0ukTTEUKGP44h8GVeik=' 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-EehWlTYp7Bqy57gDeQttaWKp0ukTTEUKGP44h8GVeik=' 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: bd9272912e0c29eaa619c74db0fac207
date: Wed, 23 Jul 2025 02:31:36 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
Path2D - Web APIs | MDN
Path2D Baseline Widely available *
The Path2D
interface of the Canvas 2D API is used to declare a path that can then be used on a CanvasRenderingContext2D
object. The path methods of the CanvasRenderingContext2D
interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.
Path2D()
Path2D
constructor. Creates a new Path2D
object.
Path2D.addPath()
Adds a path to the current path.
Path2D.closePath()
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
Path2D.moveTo()
Moves the starting point of a new sub-path to the (x, y
) coordinates.
Path2D.lineTo()
Connects the last point in the subpath to the (x, y
) coordinates with a straight line.
Path2D.bezierCurveTo()
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo()
before creating the Bézier curve.
Path2D.quadraticCurveTo()
Adds a quadratic Bézier curve to the current path.
Path2D.arc()
Adds an arc to the path which is centered at (x, y
) position with radius r
starting at startAngle
and ending at endAngle
going in the given direction by counterclockwise
(defaulting to clockwise).
Path2D.arcTo()
Adds a circular arc to the path with the given control points and radius, connected to the previous point by a straight line.
Path2D.ellipse()
Adds an elliptical arc to the path which is centered at (x, y
) position with the radii radiusX
and radiusY
starting at startAngle
and ending at endAngle
going in the given direction by counterclockwise
(defaulting to clockwise).
Path2D.rect()
Creates a path for a rectangle at position (x, y
) with a size that is determined by width
and height
.
Path2D.roundRect()
Creates a path for a rounded rectangle at position (x, y
) with a size that is determined by width
and height
and the radii of the circular arc to be used for the corners of the rectangle is determined by radii
.