Generating Images Programmatically with the CSS Painting API

JavaScript API for dynamic image creation combined with CSS

For future students of the course "JavaScript Developer. Professional" prepared a translation of the material.



We also invite you to visit the open webinar on the topic "Vue 3 - the capabilities of the new version of one of the most popular front-end frameworks . " In the lesson, the participants, together with an expert:



- Consider the key differences in the syntax of vue2 from vue3;

- will understand how to work with vue-router and VueX in the new version of the framework;

- try to create a Vue 3 project from scratch using Vue-cli.



Join us!

---

. , , . , , , . , .

« », API CSS Painting.

, API .

API CSS Painting

CSS Painting API JavaScript- CSS, background-image border-image. API, CSSOM. CSS Houdini (Houdini — API , CSS ).

:

div {
  background-image: url('assets/background.jpg);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CSS Painting API paint()



(worklet), JS, .

div {
  background-image: paint(background);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.

, . , worklets, ?

, JavaScript-, , Paint Worklet ( ). Worklet — . (worklets), worklets , , worklets , ..

.

API CSS Painting

, .

1: paint()



CSS

, paint()



CSS, .

.bubble-background {
  width: 400px;
  height: 400px;
  background-image: paint(bubble);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

bubble worklet, . .

---

: , Bit (Github).

Bit , . , , , , .

Bit Node, TypeScript, React, Vue, Angular .

. : React , Bit.dev.

---

2: (worklet)

(worklets) JS-. (paint worklet) class



. : - class Bubble { …. }



. (worklet) registerPaint()



.

class Bubble {
    paint(context, canvas, properties) {
        ........
    }
}
registerPaint('bubble', Bubble);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

registerPaint()



, CSS.

.

class Bubble {
    paint(context, canvas, properties) {
        const circleSize = 10; 
        const bodyWidth = canvas.width;
        const bodyHeight = canvas.height;

        const maxX = Math.floor(bodyWidth / circleSize);
        const maxY = Math.floor(bodyHeight / circleSize); 

        for (let y = 0; y < maxY; y++) {
          for (let x = 0; x < maxX; x++) {
            context.fillStyle = '#eee';
            context.beginPath();
            context.arc(x * circleSize * 2 + circleSize, y * circleSize * 2 + circleSize, circleSize, 0, 2 * Math.PI, true);
            context.closePath();
            context.fill();
          }
       }
    }
}
registerPaint('bubble', Bubble);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

paint()



. , , .   Canvas API, .

3: (worklet)

(worklet) HTML-.

<div class="bubble-background"></div>
<script>
 CSS.paintWorklet.addModule('https://codepen.io/viduni94/pen/ZEpgMja.js');
</script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

!

3 .

, , .

View in Editor ( )

API CSS Painting?

CSS Painting API . , .

1.

, . CSS. CSS-, , . inputProperties()



.

registerPaint('bubble', class {
  static get inputProperties() {
   return ['--bubble-size', '--bubble-color'];
  }

  paint() {
    /* ... */
  }
});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, paint()



.

paint(context, canvas, properties) {
   const circleSize = parseInt(properties.get('--bubble-size').toString());
   const circleColor = properties.get('--bubble-color').toString();
   const bodyWidth = canvas.width;
   const bodyHeight = canvas.height;

   const maxX = Math.floor(bodyWidth / circleSize);
   const maxY = Math.floor(bodyHeight / circleSize); 

   for (let y = 0; y < maxY; y++) {
     for (let x = 0; x < maxX; x++) {
       context.fillStyle = circleColor;
       context.beginPath();
       context.arc(x * circleSize * 2 + circleSize, y * circleSize * 2 + circleSize, circleSize, 0, 2 * Math.PI, true);
       context.closePath();
       context.fill();
     }
   }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

2. Math.random()



paint()



.

// CSS
body {
  width: 200px;
  height: 200px;
  background-image: paint(random);
}
// JS
function getRandomHexColor() {
  return '#'+ Math.floor(Math.random() * 16777215).toString(16)
}
class Random {
  paint(context, canvas) {
    const color1 = getRandomHexColor();
    const color2 = getRandomHexColor();

    const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop(0, color1);
    gradient.addColorStop(1, color2);

    context.fillStyle = gradient;
    context.fillRect(0, 0, canvas.width, canvas.height);
  }
}
registerPaint('random', Random);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , .

, ?

. API .

, Firefox, CSS Paint API. Chrome Chromium . , .

CSS Paint API . , .

, , , .

• .

  
  
  
  
  

• , ( ).

  
  
  
  
  

, (polyfill) , Firefox, CSS Painting API.

. !

---

"JavaScript Developer. Professional".

«Vue 3 — ».