Writing
Article
AI
Art
Angular
Photoshop
Premiere
Animal Crossing
Blog
Story
Android
Android Studio
Davinci Resolve
CSS
Clipchamp
ChatGPT
Crypto
DALL-E
Discord
Davinci Resolve
Davinci Resolve 18
Dream Studio
Express
Filmora
Flutter
PC Games
Git
GPT
GPT3
GPT4
GTA
GTA 6
Ghost Together
Ghost Together
HTML
iOS
iMovie
Illustrator
JavaScript
Mac
Mongo
Midjourney
Minecraft
Node.js
NBA 2k24
OSX
PHP
Palworld
Python
Playground AI
Roblox
React
Recipe (Cooking)
React Native
Semicolon.dev
Starfield PC Game
Snapchat
Steam
Stable Diffusion
SVG
Threads
Text To Image (AI)
VSCode
Vim
Web Development
Windows
WebGL

The Complete CSS Paint API Tutorial

asdasd

Wait. What? This was done with pure CSS?

Well, with pure CSS that was modified via CSS Paint API - which gives access to low(er)-level CSS and makes it easier to deal with CSS properties programmatically.

CSS Paint API is one of those parts of CSS you don't often see in professional web development due to limited browser support (and to limited usefulness, if we're honest). However, CSS Paint API has been implemented in Google Chrome as early as 2018 and you can already start experimenting with it.

The Paint API is part of something called CSS Houdini which is a set of features that give you access to lower-level CSS. Harry Houdini was a Hungarian-born American illusionist and stunt performer, and this is where the name comes from.

CSS Visual Dictionary All CSS properties explained by visual diagrams Get It Here

How does the Paint API work?

It works is by using Canvas API drawing functions to manipulate the background image on pixel level. Then, that background image is applied to the HTML element.

There is an initialization step. You need to check if client supports it and add your custom JavaScript module for your paint API worklet. But first we need to create our painter class and store it in an external file.

Creating your paint worklet JavaScript module

First let's create our custom painting class and call it Simple (save this file as simple.js but the name can be anything):

/ simple.js: /

class Simple {
    constructor(context, canvas, properties) {
        // clear a 50x50 block with solid black color
        context.rect(0, 0, 50, 50);
        context.fillStyle = '#000000';
        context.fill();
    }
}

Checking for browser support and using paintWorklet

To get started you must check for presence of paintWorklet property in global CSS object. The paintWorklet.js file is what we created in previous step.

if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('paintWorklet.js');
}
Write For Us
Sign Up Now  -  It's Free!

The Complete CSS Paint API Tutorial

Comments (2) New! (You can now post comments on articles!)

(By posting a comment you are registering a Ghost Together account.)
Register
Register
Post It
DM Coming Soon
f f