Playing with Houdini CSS, Part One — Introduction and PaintAPI

Eoin Falconer
Apr 11, 2018 · 7 min read
Elkling as the code magician he truly is.

What is Houdini?

Wait, what’s the catch?

Browser support for Houdini at the time of writing this article. Source: www.ishoudinireadyyet.com

So, how do I play with it?

Worklets

PaintAPI

<!doctype html>
<html>
<head>
<title>Web Starter Kit</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<textarea></textarea>
<script>
CSS.paintWorklet.addModule('circle.js');
</script>
</body>
</html>
class CirclePainter {
paint(ctx, geom, properties) {
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(geom.height/2, geom.width/2 ,25 ,0 , 2*Math.PI);
ctx.fill();
}
}
registerPaint('circle', CirclePainter);
textarea {
width: 300px;
height: 300px;
background-image: paint(circle);
}
Result of the code above. Shout out to Japan, kind of.
class CirclePainter {
static get inputProperties() {
return ['--circle-color']
}
paint(ctx, geom, properties) {
ctx.beginPath();
console.log("properties: ", properties.get('--circle-color'));
ctx.fillStyle = properties.get('--circle-color').toString();
ctx.arc(geom.height/2, geom.width/2 ,25 ,0 , 2*Math.PI);
ctx.fill();
}
}
registerPaint('circle', CirclePainter);
textarea {
width: 300px;
height: 300px;
--circle-color: blue;
background-image: paint(circle);
}

Until Next Time…

Norigin Media Tech Blog

The wonderful blog of NoriginMedia Engineers

Eoin Falconer

Written by

Hi! My name is Eoin (Owen is the pronunciation you may be more familiar with). I am a JavaScript developer at Schibsted Media Group in Oslo, Norway.

Norigin Media Tech Blog

The wonderful blog of NoriginMedia Engineers