When using setTransform on a CanvasPattern object to transform the pattern before applying it in fillStyle, the specified transformations are only rendered when using e.g. fillRect, but not when using fillText. To reproduce: 1. Load MDN page for "<CanvasPattern>.setTransform()", click "Open in Codepen" below the example code: https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern/setTransform 2. In the textarea replace line from original example: ctx.fillRect(0, 0, 400, 400); 3. ...with the code below: ctx.font = "bold 300px arial"; ctx.fillText("test", 0, 200 ); Expected result: rotated/scaled pattern is used to fill the text outlines Actual result: the pattern used to fill the text outlines is missing all transformations applied in the setTransform() call Problem is also seen in original post (https://codepen.io/xem/pen/aaNzQe), cross-referencing this page in latest Firefox vs eg. Chrome shows that Chrome will apply the rotation for the pattern (horizontal dark stripes on the text), while Firefox won't (vertical stripes).

Looks like we just forgot to include the transform in the pattern on the text path to me. try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=962d3d29da14f1924461fdcb7ddd80f93fd896cd

Pushed by aosmond@gmail.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/ac1682b691d8 Actually apply transform from canvas pattern when drawing text to a canvas. r=lsalzman