I am trying to use paintWorklet to draw Squircle divs. I was just creating a basic test on phcode.dev, then actually went to use it on my own website. However, it did not work. So I also tried it on JSFiddle and CodePen, and it worked there too. How can I resolve this?
Chrome version:
Version 118.0.5993.117 (Official Build) (64-bit)
Images (result testing for paintWorklet):
My Website:
Website
PHCode/JSFiddle/CodePen (All produce same result):
Editors
I did try using this polyfill: https://www.npmjs.com/package/css-paint-polyfill However, the results were not acceptable.
Images:
Expected:
Expected
Result on my site:
Real
Result with polyfill:
Polyfill
JSFiddle with my code:
https://jsfiddle.net/7hyujv2g/
html
<!DOCTYPE html>
<html data-theme="light">
<head>
<title>Phoenix Editor for the web</title>
</head>
<body>
<a class="btn-accent">button</a>
<script>
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule(
"https://www.unpkg.com/css-houdini-squircle/squircle.min.js"
);
}
</script>
</body>
</html>
css
:root {
--font-size: 1.1rem;
--btn-padding: 0.6em 0.8em;
--btn-text-transform: uppercase;
--default-squircle-smoothness: 0.45;
--default-squircle-radius: 25px;
--card-squircle-smoothness: 0.45;
--card-squircle-radius: 15px;
}
html[data-theme="light"] {
--color-el-1: #ffffff;
--color-el-2: #f1f4f4;
--color-accent: #5200ff;
--color-text-main: #000000;
--color-text-alt: var(--color-el-1);
}
.btn-accent {
text-transform: var(--btn-text-transform);
padding: var(--btn-padding);
outline: none;
border: none;
transition: all 0.09s;
}
.btn-accent {
background-color: var(--color-accent);
color: var(--color-text-alt);
}
Thanks in advance
The PaintWorklet API requires a secure context. You must serve your website through HTTPS (
localhostis also considered secure).