Use the CSS Paint API to dynamically create resolution-independent, variable background effects

Source: https://medium.com/better-programming, author: Ferenc Almasi

Modern web applications are image-heavy, and they account for the majority of bytes downloaded over the network. By optimizing them, you can better utilize their performance. If you happen to use geometric shapes as background images, there is an alternative: you can generate the background programmatically using the CSS Paint API [1].

In this tutorial, we'll explore its capabilities and look at how we can use it to dynamically create dynamic backgrounds that are resolution-independent. This will be the output of this tutorial:

Reference: CSS Paint API Introduction

Setting up the project

First, create a new index.html file and write the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>:art: CSS Paint API</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <textarea class="pattern"></textarea>
    <script>
      if ('paintWorklet' in CSS) {
        CSS.paintWorklet.addModule('pattern.js');
      }
    </script>
  </body>
</html>

There are a few things to note:

On line 13, we load a new Paint worklet. Currently, global support is around 63%. Therefore, we must first check whether paintWorklet is supported.
I'm using textarea for demonstration so we can see how resizing the canvas will redraw the pattern.
Finally, you need to create a pattern.js (for registering the painting workspace) as well as a styles.css where we can define several styles.

What is a worklet?

A paint worklet is a class that defines what should be drawn on the canvas. They work similarly to the canvas element. If you have previous knowledge in this area, the code will look familiar. However, they are not 100% identical. For example, text rendering methods are not yet supported in worklets.

Here, we also define the CSS styles. This is where we'll use our worklet:

.pattern {
  width: 250px;
  height: 250px;
  border: 1px solid #000;

  background-image: paint(pattern);
}

I added a black border so we can see textarea better. To reference a paint worklet, you pass paint(worklet-name) as a value to background-image property. But where does pattern come from? We haven't defined it yet, so let's do that as our next step.

Defining Worklets

Open pattern.js and add the following:

class Pattern {
  paint(context, canvas, properties) {

  }
}

registerPaint('pattern', Pattern);

Here you can register paintWorklet using registerPaint method. You can reference the first parameter in the CSS defined here. The second parameter is the class that defines what should be drawn on the canvas. It has a paint method that takes three parameters:

context
PaintRenderingContext2D
CanvasRenderingContext2D API

canvas : This is our canvas, a PaintSize object with only two properties: width and height.

properties : This returns a StylePropertyMapReadOnly object that we can use to read CSS properties and their values via JavaScript.

Draw a rectangle

The next step is to display something, so let's draw the rectangle. Add the following to your paint method:

paint(context, canvas, properties) {
  for (let x = 0; x < canvas.height / 20; x++) {
    for (let y = 0; y < canvas.width / 20; y++) {
      const bgColor = (x + y) % 2 === 0 ? '#FFF' : '#FFCC00';

      context.shadowColor = '#212121';
      context.shadowBlur = 10;
      context.shadowOffsetX = 10;
      context.shadowOffsetY = 1;

      context.beginPath();
      context.fillStyle = bgColor;
      context.rect(x * 20, y * 20, 20, 20);
      context.fill();
    }
  }
}

All we've done here is create a nested loop to loop through the width and height of the canvas. Since the size of the rectangle is 20, we divide the height and width of the rectangle by 20.

On line 4, we can use the modulus operator to switch between the two colors. I also added some shadows for depth. Finally, we draw the rectangle on the canvas. If you open it in your browser, you should have something like this:

Make the background dynamic

Sadly, aside from resizing textarea and a peek at how the Paint API redraws everything, this is mostly static. So, let's make things a little more dynamic by adding custom CSS properties that we can change.

Open your styles.css and add the following lines to it:

.pattern {
     width: 250px;
     height: 250px;
     border: 1px solid #000;

     background-image: paint(pattern);
+ --pattern-color: #FFCC00;
+ --pattern-size: 23;
+ --pattern-spacing: 0;
+ --pattern-shadow-blur: 10;
+ --pattern-shadow-x: 10;
+ --pattern-shadow-y: 1;
 }

You can define custom CSS properties by prefixing them with — . These properties can be used by the var() function. But in our case, we will use it in our paint worklet.

Checking for support in CSS

To ensure the Paint API is supported, we can also check for support in CSS. To do this, we have two options:

Use the @supports rule to guard the rules.
Use a fallback background image.

/* First option */
@supports (background: paint(pattern)) {
  /**
   * If this section is evaluated, it means that the Paint API is supported**/
}

/**
 * Second option * If the Paint API is supported, the latter rule will override the first rule.
 * If not supported, CSS will render it invalid and the rules for url() will apply.
 **/
.pattern {
  background-image: url(pattern.png);
  background-image: paint(pattern);
}

Accessing parameters in a painting worklet

To read these parameters in pattern.js , you need to add a new method to the class that defines your paint worklet:

class Pattern {
  // Anything returned by the `inputProperties` method is accessible to the paint worklet.
  static get inputProperties() {
    return [
      '--pattern-color',
      '--pattern-size',
      '--pattern-spacing',
      '--pattern-shadow-blur',
      '--pattern-shadow-x',
      '--pattern-shadow-y'
    ];
  }
}

To access these properties inside the paint method, you can use properties.get :

paint(context, canvas, properties) {
  const props = {
    color: properties.get('--pattern-color').toString().trim(),
    size: parseInt(properties.get('--pattern-size').toString()),
    spacing: parseInt(properties.get('--pattern-spacing').toString()),
    shadow:
      blur: parseInt(properties.get('--pattern-shadow-blur').toString()),
      x: parseInt(properties.get('--pattern-shadow-x').toString()),
      y: parseInt(properties.get('--pattern-shadow-y').toString())
    }
  };
}

For the color, we need to convert it to a string. Everything else needs to be converted to numbers. This is because properties.get returns CSSUnparsedValue .

Return value of properties.get

To make things more readable, I created two new functions to handle the parsing for us:

paint(context, canvas, properties) {
  const getPropertyAsString = property => properties.get(property).toString().trim();
  const getPropertyAsNumber = property => parseInt(properties.get(property).toString());

  const props = {
    color: getPropertyAsString('--pattern-color'),
    size: getPropertyAsNumber('--pattern-size'),
    spacing: getPropertyAsNumber('--pattern-spacing'),
    shadow:
      blur: getPropertyAsNumber('--pattern-shadow-blur'),
      x: getPropertyAsNumber('--pattern-shadow-x'),
      y: getPropertyAsNumber('--pattern-shadow-y')
    }
  };
}

Now all we have to do is replace everything inside the for loop with the corresponding prop value:

for (let x = 0; x < canvas.height / props.size; x++) {
  for (let y = 0; y < canvas.width / props.size; y++) {
    const bgColor = (x + y) % 2 === 0 ? '#FFF' : props.color;

    context.shadowColor = '#212121';
    context.shadowBlur = props.shadow.blur;
    context.shadowOffsetX = props.shadow.x;
    context.shadowOffsetY = props.shadow.y;

    context.beginPath();
    context.fillStyle = bgColor;
    context.rect(x * (props.size + props.spacing),
                 y * (props.size + props.spacing), props.size, props.size);
    context.fill();
  }
}

Now go back to your browser and try changing it.

Editing Background Summary in DevTools

Why is the CSS Paint API useful to us? What are the use cases?

Most obviously, it reduces the size of the response. By eliminating the use of images, you can save a network request and several thousand bytes. This improves performance.

For complex CSS effects that use DOM elements, you can also reduce the number of nodes on the page. Because you can create complex animations with the Paint API, there is no need for additional empty nodes.

The biggest benefit, in my opinion, is that it’s far more customizable than a static background image. The API also allows you to create resolution-independent images, so you don't have to worry about missing a single screen size.

If you choose to use the CSS Paint API today, make sure you provide a polyfill as it still isn’t widely adopted. If you want to tweak the finished project, you can clone it from this GitHub repository [2].

Official version of the Green Book : After the accumulation of the first two versions and three years of comprehensive rewriting, this book finally achieves a perfect match between technical analysis and user experience.

The breadth and depth make for a great article : In terms of depth, this book delves into the reasons behind JS, which is unmatched in the world; in terms of breadth, this book goes through the details of semantics, and after reading it, you will no longer be confused about the mechanism.

The idea of super language : all things have the same purpose and are similar. Strip away the JS shell and you will find that this book analyzes the technical essence of the language from a high level and is applicable to all programming languages.

The key to cultivation is to relearn : In the era of hybrid App|Node server|FaaS cloud native|front-end intelligence, returning to the essence and retaking this basic course can help you go further and faster.

References[1]

CSS Paint API: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API

[2]

GitHub repository: https://github.com/flowforfrank/css-paint

This is the end of this article about using CSS Paint API to dynamically create resolution-independent variable background effects. For more relevant CSS Paint API variable background 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!

<<: Detailed tutorial on Docker pulling Oracle 11g image configuration

>>: Vue gets token to implement token login sample code