CanvasRenderingContext2D.lineCap
The CanvasRenderingContext2D
.lineCap
property of the Canvas 2D API determines how the end points of every line are drawn. There are three possible values for this property and those are: butt
, round
and square
. By default this property is set to butt
.
See also the chapter Applying styles and color in the Canvas Tutorial.
Syntax
<var>ctx.lineCap = "butt"; <var>ctx.lineCap = "round"; <var>ctx.lineCap = "square";</var></var></var>
Options
butt
- The ends of lines are squared off at the endpoints.
round
- The ends of lines are rounded.
square
- The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
Examples
Using the lineCap
property
This is just a simple code snippet using the lineCap
property to draw lines with a rounded end.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineCap = "round"; ctx.lineTo(100, 100); ctx.stroke();
Edit the code below and see your changes update live in the canvas:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineCap = "round"; ctx.lineTo(100, 100); ctx.stroke();</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
A lineCap
example
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.
var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt','round','square']; // 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'; for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25+i*50,10); ctx.lineTo(25+i*50,140); ctx.stroke(); }
<canvas id="canvas" width="150" height="150"></canvas>
Screenshot | Live sample |
---|---|
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.lineCap' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
WebKit/Blink-specific notes
- In WebKit- and Blink-based Browsers, a non-standard and deprecated method
ctx.setLineCap()
is implemented besides this property.
See also
- The interface defining it,
CanvasRenderingContext2D
CanvasRenderingContext2D.lineWidth
CanvasRenderingContext2D.lineJoin
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/linecap