I don't know if anybody actually uses this, but I want to use the DOMMatrix object to position and SCALE an SVG-path on a HTMLCanvas 2d-context.
var path = new Path2D("M0.55,0.55 C0.55,0.55,0.45,0.55,0.45,0.55 C0.45,0.55,0.45,0.45,0.45,0.45 C0.45,0.45,0.55,0.45,0.55,0.45 C0.55,0.45,0.55,0.55,0.55,0.55");
var matrix = new DOMMatrix();
matrix.translateSelf(50,50);
matrix.scaleSelf(5); // <-- THIS IS THE PROBLEM!
//add matrix to SVG-Path
var draw = new Path2D();
draw.addPath(path, matrix);
ctx.strokeStyle = "lime";
ctx.stroke(draw);
Now, for some reason scaleSelf() destroys the matrix. The objects attributes get filled with NAN.
Before scale
After scale
Anybody got a fix? (Browser: Firefox Dev)
var matrix = new DOMMatrix();
matrix.translateSelf(50,50);
console.log("After translate: ", matrix);
matrix.scaleSelf(5); // <-- THIS IS THE PROBLEM!
console.log("After scale: ", matrix);