Repeated background filling from an image.
import { Pattern, Image, Circle } from "pencil.js";
const position = [100, 100];
const radius = 50;
const patternOptions = {
repeat: Pattern.repetition.repeat,
origin: "center",
scale: 0.5,
};
// Preload the image
Image.load("pattern.png").then((image) => {
const circle = new Circle(position, radius, {
fill: new Pattern(image, patternOptions),
});
});
Name | Type | Default | Comment |
---|---|---|---|
repeat | String |
"repeat" |
Repetition rule |
origin | Position |
new Position() |
Relative offset |
scale | Number or Position |
1 |
Scaling ratio or a pair of value for horizontal and vertical scaling |