The rectangle texture is actually a single pixel texture that is stretched to the dimensions of the element. Using the color property it can be used to give an element to a solid background. When setting different colors for different edges (colorTop etc) linear gradients can be created.
class TextureDemo extends lng.Application {
static _template() {
return {
RectangleDefault: {
x: 100, y: 100, w: 200, h: 100, rect: true
},
RectangleWithColor: {
x: 400, y: 100, w: 200, h: 100, rect: true, color: 0xFF1C27bC
},
RectangleWithGradientTopBottom: {
x: 100, y: 300, w: 200, h: 100, rect: true, colorTop: 0xFF636EFB, colorBottom: 0xFF1C27bC
},
RectangleWithGradientLeftRight: {
x: 400, y: 300, w: 200, h: 100, rect: true, colorLeft: 0xFF636EFB, colorRight: 0xFF1C27bC
},
RectangleWithGradientDiagonal: {
x: 100, y: 500, w: 200, h: 100, rect: true, colorUl: 0xFF636EFB, colorUr: 0xFF00FF00, colorBr: 0xFF1C27bC, colorBl: 0xFF00FF00,
},
RectangleWithGradientDiagonalMixed: {
x: 400, y: 500, w: 200, h: 100, rect: true, colorLeft: 0xFF00FF00, colorBr: 0xFF1C27bC, colorUr: 0xFFFF0000
}
}
};
}
const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const app = new TextureDemo(options);
document.body.appendChild(app.stage.getCanvas());