CSS Paint API: A CSS-like Drawing Board

.box {
    width: 180px; height: 180px;
    /* transparent-grid name yourself*/
    background-image: paint(transparent-grid);
}

if (window.CSS) {
    CSS.paintWorklet.addModule('paint-grid.js');
}

// transparent-grid naming and CSS correspondence registerPaint('transparent-grid', class {
    paint(context, size) {
       // Here is the drawing code....
    }
});

registerPaint('abc', class {
    paint(context, size, properties) {
       // Drawing code goes here....
    }
});

size

size is an object containing the drawing size. The data structure is as follows:

{
    width: 180,
    height: 180
}

The size of size is affected by the size of background-size property. Therefore, for repeated backgrounds, you can use background-repeat to perform a tile loop without having to loop in the drawn JS code. For example, the demo effect that is about to be shown below can also be achieved in this way, CSS part:

.box {
    width: 180px; height: 180px;
    background-image: paint(transparent-grid);
    background-size: 16px 16px;
}

Then, in paint-grid.js, you only need to fill white-gray-gray-white, four grids are enough, no loop is needed. properties can be used to obtain the obtained CSS properties and property values, including CSS variable values; and some other parameters.

Seeing is believing, you can click here: CSS Paint API draws a transparent grid as a background demo (currently only works on Chrome)

The effect is as follows:

The complete drawing code in paint-grid.js is as follows:

registerPaint('transparent-grid', class {
    paint(context, size) {
        // Two grid colors var color1 = '#fff', color2 = '#eee';
        // Grid size var units = 8;
        // Loop through the horizontal axis for (var x = 0; x < size.width; x += units) {
            for (var y = 0; y < size.height; y += units) {
                context.fillStyle = (x + y) % (units * 2) === 0 ? color1 : color2;
                context.fillRect(x, y, units, units);
            }
        }
    }
});

Replenish:
For repeating backgrounds like grid, you can use background-repeat to make them tiled and looped. You don’t have to loop in the drawn JS code, but you need to use background-size property to change the drawing size. For example, the demo effect above can also be achieved like this, CSS part:

.box {
    width: 180px; height: 180px;
    background-image: paint(transparent-grid);
    background-size: 16px 16px;
}

Then, in paint-grid.js, you only need to fill white-gray-gray-white, four grids are enough, no loop is needed.

registerPaint('transparent-grid', class {
    paint(context, size) {
        // Two grid colors var color1 = '#fff', color2 = '#eee';
        // Two white grids context.fillStyle = color1;
        context.fillRect(0, 0, 8, 8);
        context.fillRect(8, 8, 8, 8);
        // Two gray grids context.fillStyle = color1;
        context.fillRect(0, 4, 8, 8);
        context.fillRect(4, 0, 8, 8);
    }
});

Be more understandable.

3. CSS variables make Paint API shine

The above example shows the basic use of CSS Paint API. However, although it looks trendy, it does not reflect the outstanding features of CSS Paint API.

Think about it, if I directly use JS plus Canvas API to draw a grid pattern, convert it to Base64, and directly display it as the background image of the element, wouldn’t it be the same effect, and the compatibility is better (IE9+ supported), and all Canvas APIs can be used without restrictions. In comparison, there is absolutely no reason to use the CSS Paint API!

That’s right! If we just need a static background, it is better to draw it directly on Canvas and then convert it into a Base64 image (
toDataURL() method) or Blob image (toBlob() method).

The advantage of CSS Paint API is that as a CSS property value, the rendering is real-time and automatically redrawn with the browser. Therefore, as long as our drawing is associated with CSS variables, all rendering effects will be refreshed and redrawn in real time, which is awesome!

Still using the transparent grid example above, we can extract the grid color and grid size as CSS variables as follows:

.box {
    width: 180px; height: 180px;
    --color1: #fff;
    --color2: #eee;
    --units: 8;
    background: paint(custom-grid);
}

We can obtain these defined variables when drawing, as shown below:

registerPaint('custom-grid', class {
    // Get 3 variables static get inputProperties() {
        return [
            '--color1',
            '--color2',
            '--units'
        ]
    }
    paint(context, size, properties) {
        // Two grid colors var color1 = properties.get('--color1').toString();
        var color2 = properties.get('--color2').toString();
        // Grid size var units = Number(properties.get('--units'));
        // Drawing code, same as before...
    }
});

The static effect is the same:

However, if we modify the variable value defined in the CSS code, we can see the real-time change effect of the Paint background image (see the GIF below):

Seeing is believing. You can click here: CSS variables plus Paint API to draw transparent grid demo

No additional timer is required, real-time rendering, and control is very convenient.

With the CSS Properties & Values ​​API, we can register all variables such as --units as legal CSS properties. Then, we can use transition and animation properties to control the movement and animation of the Paint background image with pure CSS, and the effect of floating clouds on the button is no problem at all.

This case will be introduced later.

Houdini, compatible with other

The CSS Paint API introduced in this article is part of CSS Houdini, and the CSS Properties & Values ​​API mentioned at the end is also part of the API currently supported by Chrome. CSS Houdini can customize CSS properties, layout, etc., and its future potential is limitless.

Due to compatibility issues, if you want to use the CSS Paint API in an actual project, you also need to do compatibility processing, for example:

.box {
    width: 180px; height: 180px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2P8////fwY84P379/ikGRhHDRgWYfDu3Tu86UBQUBB/Ohg1gIFx6IcBABlfVjmYTYi7AAAAAElFTkSuQmCC);
    background: paint(transparent-grid, whatever);
}

CSS Paint API is more suitable for dynamic scenes and for meeting requirements that require real-time drawing and rendering. If it is a purely static display, it can be achieved directly using JS plus Canvas. There is no need to use technology for the sake of technology.

There are many things to play with CSS Houdini and its related new technologies. I will introduce more about them in the future. This article ends here. Thank you for reading!

Reference Documentation

https://www.w3.org/TR/css-paint-api-1/https://css-houdini.rocks/

Finally, finally, let me talk about something else that may be of interest to you. For the transparent grid effect in this article, the best way to achieve it is to draw the CSS background directly, using linear gradients and CSS3 multiple backgrounds.

The code is as follows:

.box {
    width: 180px; height: 180px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

The real-time effect is as follows:

Size control is very convenient and naturally supports animation .

This article is an original article, and knowledge points will be updated frequently and some errors will be corrected. Therefore, please keep the original source when reprinting to facilitate tracing, avoid being misled by outdated and erroneous knowledge, and have a better reading experience.
This article address: https://www.zhangxinxu.com/wordpress/?p=8204

This is the end of this article about the CSS Paint API, the drawing board of the CSS world. For more relevant CSS Paint API content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!