0👍
ctx.createPattern()
is a 2d canvas function, with patchy standards. I found the behavior for repeat-x
and repeat-y
to vary between browsers. The example linked here works in Firefox (apart from the series icon missing the background image with repeat-y) and is blank in Chromium, but the situation reverses for this W3Schools example, Chromium working and Firefox only working with repeat
and no-repeat
, likely due to a long-standing bug.
The provided code is barely modified from a Chart.js sample and looks fine other than an “Unable to parse color from object” error, that may or may not have been related; the problem is likely a mix of library and browser rather than anything in the code. For anyone else trying for a simple patterned background, I recommend cutting losses and using the pattern method mentioned in the last two links.