Bug 45277 – Canvas api: c.createPattern(img,...) does not work if image is SVG

• Status: UNCONFIRMED
• Component: DOM

[Thaddee Tyl]

Created attachment 66671 [details]
Canvas with an SVG image drawn as a pattern

Reproducibility: always.

Steps:
1. Go to a page that invokes c.createPattern(img, "repeat"); with an SVG image and draws the pattern onto a canvas.
2. Consider the fact that it does not appear.

Notes:
* c.fill() do not work.
* c.stroke() do not work.
* It is not an image loading issue.
* It is not linked to the "repeat" part -- "no-repeat", "repeat-x", "repeat-y", "", and null, all yield the same result.

[stml]

I have also independently encountered this bug, with comparable results.

var img = new Image();
img.onload = function() {
    var pattern = badge.createPattern(img, 'repeat');
    badge.fillStyle = pattern;
    // draw 'badge' shape
    badge.fill();
    };  
img.src = '../flags/iso/'+country+'.svg';

This works as expected in Firefox and Chrome, but in Safari (7.0.3) the background is blank (white). Using a png or jpg for the pattern works as expected in Safari et al - it's only SVGs that render incorrectly. DrawImage also works in Safari for SVGs - it's only createPattern that fails.

Looks like this is still broken

[Ahmad Saleem]

Changed above and only changed from SRC to newer placeholder SVG - https://jsfiddle.net/Lp1uvqoe/

All browsers (Safari 17.5, Chrome Canary 127 and Firefox Nightly 128) looks same here.

@Karl - any input?