Question

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?

Answer 1

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