From the course: JavaScript: Modern Browser APIs

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Parameters with CSS Paint API

Parameters with CSS Paint API - JavaScript Tutorial

From the course: JavaScript: Modern Browser APIs

Start my 1-month free trial Buy for my team

Parameters with CSS Paint API

“

- [Instructor] Okay, let's pick up where we left off on our last example by adding the ability to customize the image that gets drawn by using CSS custom properties. So, here in my editor, I'm going to open up the CSS start html and CSS paint start JS files, and you can see this is where we left off. So, what I need to do first is define two custom properties in my style sheet that are going to represent the thickness and color of the lines. So, I'm going to use dash dash cross thickness, and I'll give that a value of two, and then I'll define cross color, which will be red. Then in my painter class definition, I have to define a static method that declares what properties my class uses. So, I'll write a static getter, and it's called input properties. This method is going to return an array that identifies the name of the properties that I want to access from CSS. So, the first one is dash dash cross thickness, and the second one is, dash dash cross color. Then, I just need to…

Contents