canvaskit-wasm 0.39
build 2026-04-29
StrokeJoin
The shape drawn where two stroke segments meet at a corner. Set via paint.setStrokeJoin(CK.StrokeJoin.<value>).
const join = controls.select('join', ['Miter', 'Round', 'Bevel'], 'Miter');
const stroke = new CK.Paint();
stroke.setStyle(CK.PaintStyle.Stroke);
stroke.setStrokeWidth(20);
stroke.setColor(CK.Color(60, 160, 90, 1));
stroke.setAntiAlias(true);
const path = new CK.Path();
path.moveTo(80, 60); path.lineTo(340, 60); path.lineTo(60, 196); path.lineTo(340, 196);
loop(() => {
stroke.setStrokeJoin(CK.StrokeJoin[join()]);
canvas.clear(CK.WHITE);
canvas.drawPath(path, stroke);
surface.flush();
});All values
| Value | Shape | Notes |
|---|---|---|
Miter | Sharp angle. | Default. Falls back to Bevel when angle exceeds the miter limit (Paint.setStrokeMiter). |
Round | Quarter-circle arc joins the segments. | Smooth curves regardless of angle. |
Bevel | Diagonal cut between the outer edges. | Always lands the corner; sharp angles look chamfered. |