Stroke at coordinates on HTML canvas with Javascript

Question

I'm attempting to stroke a svg path on a particular location of a canvas, but I'm not sure how I can indicate the coordinates of where to stroke the path. How can I do that? I have the following code so far.

var path = new Path2D(//path string here);
ctx.fillStyle = '#000';
ctx.strokeStyle = '#000';
ctx.stroke(path);
ctx.fill(path);

score 0 · Answer 1 · answered Dec 07 '20 at 20:45

Some searching answered this for me: How to position Path2D SVG element in canvas?

Courtesy of Blindman67, I can translate the position as follows.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.translate(100, 100);
ctx.fill(p);

Stroke at coordinates on HTML canvas with Javascript

1 Answers1