Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas lineCap Property

❮ Canvas Reference

Example

Draw a line with rounded end caps:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20, 20);
ctx.lineTo(20, 200);
ctx.stroke();
Try it Yourself »

Description

The lineCap property sets or returns the style of the end caps for a line.

Legal values: butt (default), round, and square.

Note

The values round and square make the lines slightly longer.

See Also:

The lineCap Property (Set end caps)

The lineJoin Property (Set join caps)

The lineWidth Property (Set join caps)

The fillStyle Property (Set fill color/style)

The strokeStyle Property (Set stroke color/style)


Syntax

context.lineCap = "butt|round|square"

Property Values

Value Description Play it
butt A flat edge at the ends of the line Play it »
round A rounded cap at the ends of the line Play it »
square A square cap at the ends the line Play it »

Browser Support

The <canvas> element is an HTML5 standard (2014).

lineCap is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11

❮ Canvas Reference