Exercise 13.04: Paint Worklet with Mouse Input

In this exercise, we will create a new paint worklet that paints a circle that follows the mouse as it moves over an element that the paint worklet is associated with. Using CSS pseudo-classes, we will then update the custom properties when the user clicks the element in order to paint a clicked state for the element.

The steps are as follows:

1. Create a new file under Chapter13 folder and name it pointer-input-paint.js. We will create a new paint worklet in this file.
2. In pointer-input-paint.js, we want to create a JavaScript class called PointerInputPaint. This will encompass the behavior of our paint worklet. We will register the paint worklet as "pointer" so that we can use it in our document's CSS:

   class PointerInputPaint {
       paint(context, geometry, properties) {
       }
   }
   registerPaint("pointer", PointerInputPaint);

3. Next, we can define a set of input...