Does it work with input tag?

[Jonnas123]

Hello, nice color picker, I'm new to it. Now I use <input id="colorpicker" type="color"> for Fabric.js. I want to switch to your picker but it's not working for my case. Here is what I try.

<input id="colorpicker">

<script>
const alwan = new Alwan('#colorpicker', {
});
</script>

The input tag will then change to the button tag like this. This doesn't work with Fabric.js.

<button class="alwan__button alwan__preset-button" type="button" id="colorpicker" style="--alwan-color: rgb(173, 23, 23);"></button>

[sefianecho]

That's because the option preset is set to true by default (preset button), change it to false to keep the input.

const alwan = new Alwan('#colorpicker', {
    preset: false
});

[Jonnas123]

Now the picker shows up after using the preset: flase. However, I don't know why it doesn't apply to Fabric js's text. But I try this picker Coloris it works.

[sefianecho]

You need to set the value of the input.

Example:

const input = document.getElementById('colorpicker');
alwan.on('color', e => {
     input.value = e.rgb;
});

[Jonnas123]

Sorry, my misunderstanding. This one works for me. With or without preset: false, still work.

const alwan = new Alwan('#colorpicker', {

});

const input = document.getElementById('colorpicker');
   alwan.on('color', e => {
   input.style.color = e.rgb;
   canvas.getActiveObject().set("fill",input.style.color);
   canvas.renderAll();
   });

[sefianecho]

You don't need an input, you can set the fill color directly from the color picker.

alwan.on('color', e => {
     canvas.getActiveObject().set("fill", e.rgb);
     canvas.renderAll();
 });

[Jonnas123]

But if have many Ids to apply, still need, right?

[sefianecho]

Depends on your code.