UDN Search

paintsize in the example above, we created a 20x200 unit box, painted 15 units from the top of the element it is the same regardless of the size of the element.
...it would be better if the background image was relative to the size of the element — we can use the element's paintsize property to ensure the background image is proportional to the size of the element's box model size.
... the code to do this looks like so: registerpaint('headerhighlight', class { static get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context size is the paintsize, the dimensions (height and width) of the box being painted */ paint(ctx, size) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 ); } }); this code example has two differences from our first example: we've included a second argument, which is the paint size.
...class { static get contextoptions() { return {alpha: true}; } /* use this function to retrieve any custom properties (or regular properties, such as 'height') defined for the element, return them in the specified array */ static get inputproperties() { return ['--boxcolor', '--widthsubtractor']; } paint(ctx, size, props) { /* ctx -> drawing context size -> paintsize: width and height props -> properties: get() method */ ctx.fillstyle = props.get('--boxcolor'); ctx.fillrect(0, size.height/3, size.width*0.4 - props.get('--widthsubtractor'), size.height*0.6); } }); we used the inputproperties() method in the registerpaint() class to get the values of two custom properties set on an element that has boxbg applied to it and then used those ...