#PathEffect — factories

CK.PathEffect builds path-effect objects. A path effect modifies the geometry of a stroke before Skia rasterizes it: dashes, dotted lines, jitter, stamp-along-path, hatch fills. Install on a paint with paint.setPathEffect(effect).

Caller deletes via effect.delete().

CK.PathEffect.MakeCorner (corner-rounding) is exposed in the upstream canvaskit-wasm typings but isn't wired in this build — calling it errors. The factories below are verified working.

#MakeDash

MakeDash(intervals, phase) — alternate "on / off" lengths. Combine with StrokeCap.Round for dotted lines.

const dash = CK.PathEffect.MakeDash([12, 8, 4, 8], 0);

const stroke = new CK.Paint();
stroke.setStyle(CK.PaintStyle.Stroke);
stroke.setStrokeWidth(4);
stroke.setColor(CK.Color(40, 90, 180, 1));
stroke.setAntiAlias(true);
stroke.setPathEffect(dash);

const r = CK.RRectXY(CK.LTRBRect(60, 30, 360, 220), 24, 24);

loop(() => {
  canvas.clear(CK.WHITE);
  canvas.drawRRect(r, stroke);
  surface.flush();
});

#MakeDiscrete

MakeDiscrete(segLength, deviation, seed) — break the path into segLength segments and displace each endpoint by up to deviation pixels from a deterministic random walk seeded by seed. The hand-drawn / sketchy look.

const jitter = CK.PathEffect.MakeDiscrete(6, 4, 0);

const stroke = new CK.Paint();
stroke.setStyle(CK.PaintStyle.Stroke);
stroke.setStrokeWidth(2);
stroke.setColor(CK.Color(220, 60, 60, 1));
stroke.setAntiAlias(true);
stroke.setPathEffect(jitter);

const p = new CK.Path();
p.addCircle(210, 128, 90);

loop(() => {
  canvas.clear(CK.WHITE);
  canvas.drawPath(p, stroke);
  surface.flush();
});

#MakePath1D

MakePath1D(path, advance, phase, style) — walks the stroked path and lays a small stamp Path every advance units. style controls how each stamp orients itself:

• CK.Path1DEffect.Translate — keep the stamp axis-aligned.
• CK.Path1DEffect.Rotate — rotate to follow the path's local tangent.
• CK.Path1DEffect.Morph — distort the stamp to bend with the curvature.

Note the runtime namespace is CK.Path1DEffect, not Path1DEffectStyle (the d.ts type alias diverges from the namespace name here).

const style = controls.select('style', ['Translate', 'Rotate', 'Morph'], 'Rotate');

const stamp = new CK.Path();
stamp.moveTo(0, -6);
stamp.lineTo(12, 0);
stamp.lineTo(0, 6);
stamp.close();

const path = new CK.Path();
path.moveTo(40, 130);
path.cubicTo(140, 30, 280, 230, 380, 130);

const stroke = new CK.Paint();
stroke.setStyle(CK.PaintStyle.Stroke);
stroke.setStrokeWidth(2);
stroke.setColor(CK.Color(40, 90, 180, 1));
stroke.setAntiAlias(true);

loop(() => {
  const effect = CK.PathEffect.MakePath1D(stamp, 26, 0, CK.Path1DEffect[style()]);
  stroke.setPathEffect(effect);
  canvas.clear(CK.WHITE);
  canvas.drawPath(path, stroke);
  effect.delete();
  surface.flush();
});

#MakeLine2D

MakeLine2D(width, matrix) — stamps parallel lines orthogonal to the matrix's basis. Useful for hatching/cross-hatch fills. The matrix's first column controls the line direction; the translation moves the stripe pattern's origin.

// 12-px-wide diagonal hatching at 45°.
const angle = PI / 4;
const spacing = 16;
const matrix = [
  cos(angle) * spacing, -sin(angle) * spacing, 0,
  sin(angle) * spacing,  cos(angle) * spacing, 0,
];
const hatch = CK.PathEffect.MakeLine2D(2, matrix);

const stroke = new CK.Paint();
stroke.setStyle(CK.PaintStyle.Stroke);
stroke.setColor(CK.Color(40, 90, 180, 1));
stroke.setAntiAlias(true);
stroke.setPathEffect(hatch);

const r = CK.RRectXY(CK.LTRBRect(60, 30, 360, 220), 18, 18);

loop(() => {
  canvas.clear(CK.WHITE);
  canvas.drawRRect(r, stroke);
  surface.flush();
});

#MakePath2D

MakePath2D(matrix, path) — tiles a small Path (a stamp shape) across the destination, transformed by matrix. Pattern fills.

// 18×18 grid; stamp = a small plus sign.
const stamp = new CK.Path();
stamp.moveTo(-3, -3); stamp.lineTo(3, -3); stamp.lineTo(3, -1); stamp.lineTo(7, -1);
stamp.lineTo(7, 1);   stamp.lineTo(3, 1);  stamp.lineTo(3, 5);  stamp.lineTo(-3, 5);
stamp.lineTo(-3, 1);  stamp.lineTo(-7, 1); stamp.lineTo(-7, -1); stamp.lineTo(-3, -1);
stamp.close();

const matrix = [18, 0, 0, 0, 18, 0];
const tile = CK.PathEffect.MakePath2D(matrix, stamp);

const stroke = new CK.Paint();
stroke.setStyle(CK.PaintStyle.Stroke);
stroke.setColor(CK.Color(60, 160, 90, 1));
stroke.setAntiAlias(true);
stroke.setPathEffect(tile);

const r = CK.RRectXY(CK.LTRBRect(60, 30, 360, 220), 18, 18);

loop(() => {
  canvas.clear(CK.WHITE);
  canvas.drawRRect(r, stroke);
  surface.flush();
});

#All factories

#See also

• Paint.setPathEffect, Paint.setStrokeCap.
• StrokeCap, StrokeJoin.