Exercise 13.02: Creating a Red Fill Paint Worklet
In this exercise, we will create our first very simple paint worklet. Our first iteration of a paint worklet will be limited to painting a rectangle, that is, the full size of the canvas, with the fill color red. This exercise will get us used to registering a paint worklet and applying it to CSS. Later, we will expand upon this simple paint worklet to develop some more sophisticated effects.
The steps are as follows:
- Firstly, we want to create our worklet file. Create a new file and save it as
red-fill-paint.js
underChapter13
folder. - To be able to use the paint worklet, we will need a web page. In the same directory as our paint worklet file, create a file and save it as
Exercise 13.02.html
. Add the following code for a simple web page:<!DOCTYPE html> <html lang="en"> Â Â Â Â <head> Â Â Â Â Â Â Â <meta charset="utf-8"> Â Â ...