use dynamic repeat type for bkgImg rendering

This commit is contained in:
TreehouseNorris 2022-12-07 15:59:21 -05:00
parent 6020386bbe
commit 0896c5f261

View File

@ -584,6 +584,7 @@ export class CanvasRenderer extends Renderer {
async renderBackgroundImage(container: ElementContainer): Promise<void> { async renderBackgroundImage(container: ElementContainer): Promise<void> {
let index = container.styles.backgroundImage.length - 1; let index = container.styles.backgroundImage.length - 1;
const repeatTypes = ['repeat', 'no-repeat', 'repeat-x', 'repeat-y'];
for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) { for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
if (backgroundImage.type === CSSImageType.URL) { if (backgroundImage.type === CSSImageType.URL) {
let image; let image;
@ -602,7 +603,7 @@ export class CanvasRenderer extends Renderer {
]); ]);
const pattern = this.ctx.createPattern( const pattern = this.ctx.createPattern(
this.resizeImage(image, width, height), this.resizeImage(image, width, height),
'repeat' repeatTypes[+container.styles.backgroundRepeat]
) as CanvasPattern; ) as CanvasPattern;
this.renderRepeat(path, pattern, x, y); this.renderRepeat(path, pattern, x, y);
} }
@ -623,7 +624,7 @@ export class CanvasRenderer extends Renderer {
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
if (width > 0 && height > 0) { if (width > 0 && height > 0) {
const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern; const pattern = this.ctx.createPattern(canvas, repeatTypes[+container.styles.backgroundRepeat]) as CanvasPattern;
this.renderRepeat(path, pattern, x, y); this.renderRepeat(path, pattern, x, y);
} }
} else if (isRadialGradient(backgroundImage)) { } else if (isRadialGradient(backgroundImage)) {