W3Schools.com

HTML5 canvas lineCap Attribute

HTML5 track Tag Reference HTML5 canvas reference

Example

Draw a line with rounded linecaps:

Yor browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

Try it yourself »

Definition and Usage

The lineCap attribute specifies the "pencil cap" of the drawing property.

Default value: butt
JavaScript syntax: context.lineCap="round";


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The lineCap attribute is supported in all major browsers.


Attribute Values

Value Description Play it
butt The pencil draws with a butt cap. Play it »
round The pencil draws with a round cap. Play it »
square The pencil draws with a square cap. Play it »


HTML5 track Tag Reference HTML5 canvas reference


WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE