Line Styles E-mail
Canvas element
Canvas context
Transformations
Compositing
Colours
Context styles
Gradients
Patterns
Line styles
Shadows
Simple shapes
Paths
Text
Images
Pixel manipulation
Example: Webtris

context.lineWidth [ = value ]

  • Returns or sets the line width.
  • value must be a number, greater than zero.
  • Invalid values are ignored.

context.lineCap [ = value ]

  • Returns or sets the line cap style, specifying how the end of a line is to be drawn.
  • value is one of 'butt', 'round' or 'square'.
  • Invalid values are ignored.

context.lineJoin [ = value ]

  • Returns or sets the the line join style, which defines how the join between two lines in a path is rendered.
  • value is one of 'bevel', 'round' or 'miter'.
  • Invalid values are ignored.

context.miterLimit [ = value ]

  • Returns or sets the miter limit ratio, which limits the length of the point on very sharp corners.
  • value must be a number, greater than zero.
  • Invalid values are ignored.
  • lineJoin must be set to 'miter' for this value to have an effect.

Unfortunately, your browser does not support modern web standards.
Please use one of the supported browsers listed below, they're free to download and use.

Supported browsers: Firefox, Safari, Chrome, Opera, and Konqueror.


Source (click to expand)

var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

// Draws a line to demonstrate lineCap
function drawLineCap(x, y) {
  ctx.beginPath();
  ctx.moveTo(x, y + 30);
  ctx.lineTo(x, y);
  ctx.stroke();
}

// Draws a corner to demonstrate lineJoin example
function drawLineJoin(x, y) {
  ctx.beginPath();
  ctx.moveTo(x + 10, y + 30);
  ctx.lineTo(x - 10, y + 15);
  ctx.lineTo(x + 10, y);
  ctx.stroke();
}
// Draw a sharp angle join to demonstrate miterLimit
function drawMiterLimit(x, y) {
  ctx.beginPath();
  ctx.moveTo(x + 15, y + 20);
  ctx.lineTo(x - 15, y + 10);
  ctx.lineTo(x + 15, y);
  ctx.stroke();
}

//***********************************************************
// Line styles
//*********************************************************** 

// Draw a blue line to show where the line style example ends
ctx.save();
ctx.lineWidth = 1;
ctx.strokeStyle = "#00AAFF";
ctx.beginPath();
ctx.moveTo(40, 20);
ctx.lineTo(280, 20);
ctx.stroke();
ctx.restore();

ctx.save();
ctx.lineWidth = 10;

// Butt should end up stopping at the blue line
ctx.lineCap = 'butt';
drawLineCap(80, 20);

// Round should show a filled half circle above the line
ctx.lineCap = 'round';
drawLineCap(160, 20);

// Square should protrude lineWidth pixels above the line
ctx.lineCap = 'square';
drawLineCap(240, 20);

ctx.restore();

//*********************************************************** 
// Line joins
//*********************************************************** 

ctx.save();
ctx.lineWidth = 10;

// Bevel produces a flat corner
ctx.lineJoin = 'bevel';
drawLineJoin(80, 90);

// Round produces a round corner
ctx.lineJoin = 'round';
drawLineJoin(160, 90);

// Miter produces a pointed corner
ctx.lineJoin = 'miter';
drawLineJoin(240, 90);

ctx.restore();

//*********************************************************** 
// Miter limit
//*********************************************************** 

ctx.save();
ctx.lineWidth = 10;
ctx.lineJoin = 'miter';

ctx.miterLimit = 50;
drawMiterLimit(105, 160);

ctx.miterLimit = 1;
drawMiterLimit(210, 160);

ctx.restore();