Я пытаюсь изменить происхождение рисунка холста, но не могу достичь того, чего хочу.

Мне нужно нарисовать линию, заполненную пунктиром. Точечный рисунок создается с помощьюcreatePattern (подача на него динамически созданного элемента canvas).

Холст (по сути красная точка) создается так:

function getPatternCanvas() {
  var dotWidth = 20,
      dotDistance = 5,
      patternCanvas = document.createElement('canvas'),
      patternCtx = patternCanvas.getContext('2d');

  patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;

  // attempt #1:
  // patternCtx.translate(10, 10);

  patternCtx.fillStyle = 'red';
  patternCtx.beginPath();
  patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false);
  patternCtx.closePath();
  patternCtx.fill();

  return patternCanvas;
}

Затем рисуется линия с использованием этого шаблона (холст):

var canvasEl = document.getElementById('c');
var ctx = canvasEl.getContext('2d');
var pattern = ctx.createPattern(getPatternCanvas(), 'repeat');

// attempt #2
// ctx.translate(10, 10);

ctx.strokeStyle = pattern;
ctx.lineWidth = 30;

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

Итак, мы получаем это:

Теперь я хотел бы сместить происхождение этих точек, скажем, на 10 пикселей. Перевод холста шаблона не помогает, так как тогда мы не получим полных точек:

И перевод контекста самого canvas не помогает, так как это смещает линию, а не сам шаблон:

Перевод контекста, похоже, не влияет на происхождение шаблона.

Есть ли способ изменить смещение самого шаблона?