The CanvasRenderingContext2D.lineCap
property of the Canvas 2D API determines the shape used to draw the end points of lines.
Note: Lines can be drawn with the stroke()
, strokeRect()
, and strokeText()
methods.
The CanvasRenderingContext2D.lineCap
property of the Canvas 2D API determines the shape used to draw the end points of lines.
Note: Lines can be drawn with the stroke()
, strokeRect()
, and strokeText()
methods.
One of the following:
This example rounds the end caps of a straight line.
html
<canvas id="canvas"></canvas>
js
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineWidth = 15; ctx.lineCap = "round"; ctx.lineTo(100, 100); ctx.stroke();
In this example three lines are drawn, each with a different value for the lineCap
property. Two guides to see the exact differences between the three are added. Each of these lines starts and ends exactly on these guides.
The line on the left uses the default "butt"
option. It's drawn completely flush with the guides. The second is set to use the "round"
option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the "square"
option. This adds a box with an equal width and half the height of the line thickness.
js
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // Draw guides ctx.strokeStyle = "#09f"; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(140, 10); ctx.moveTo(10, 140); ctx.lineTo(140, 140); ctx.stroke(); // Draw lines ctx.strokeStyle = "black"; ["butt", "round", "square"].forEach((lineCap, i) => { ctx.lineWidth = 15; ctx.lineCap = lineCap; ctx.beginPath(); ctx.moveTo(25 + i * 50, 10); ctx.lineTo(25 + i * 50, 140); ctx.stroke(); });
Screenshot | Live sample |
---|---|
Specification |
---|
HTML Standard # dom-context-2d-linecap-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
lineCap |
1 | 12 | 1.5 | 9 | ≤12.1 | 2 | 4.4 | 18 | 4 | ≤12.1 | 1 | 1.0 |
ctx.setLineCap()
is implemented in addition to this property. CanvasRenderingContext2D
CanvasRenderingContext2D.lineWidth
CanvasRenderingContext2D.lineJoin
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap