CODEWITHSUNDEEP
javascripthtmlcanvas
Ryan Peschel
Ryan Peschel

Reputation: 11828

Changing lineCap and lineJoin prior to drawing a rectangle doesn't do anything?

I have this code:

context.lineWidth = 10;

context.lineCap = "square";
context.lineJoin = "square";

context.strokeRect(x, y, w, h);

lineWidth seems to be working just fine but changing lineCap and lineJoin doesn't do anything. The rectangle is still rounded from earlier when I set the lineCap and lineJoin to "round". Does anyone know why this is?

Upvotes: 1

Views: 918

Answers (1)

Loktar
Loktar

Reputation: 35309

Its because you need to use miter for lineJoin since square isn't a valid value.

Live Demo

The lineJoin attribute defines the type of corners that UAs will place where two lines meet. The three valid values are bevel, round, and miter.

W3 reference

Also if you're just doing rects, you don't need lineCap

Upvotes: 3

Related Questions