How to pass parameters with a canvas to a function (building a web component)

Question

i'm currently working on web components and i just created one with chart.js, i got it working and displaying but now i don't even know where to start.I want to be able to pass parameters into my canvas, declared as:

ctx.htmlItem.html('<div><canvas id="myChart1" height="400" width="800" style="width:800px;height:400px;"></canvas></div>');

I want to be able to get a label similar to: <webComponentName color="FFFFFF"size="s" value="80" label="Small" symbol="%" ></webComponentName> , to be able to build it just by writing the data into the label so my user can easily work with it

the data i want to pass is similar to this :

var dataBubble = {
                datasets: [
                    {
                        label: 'First Dataset',
                        data: [
                            {
                                x: 20,
                                y: 30,
                                r: 15
                            },
                            {
                                x: 40,
                                y: 10,
                                r: 10
                            }
                        ],
                        backgroundColor: "#FF6384",
                        hoverBackgroundColor: "#FF6384",
                    }]
            };
            var optionsBubble = {
                elements: {
                    points: {
                        borderWidth: 1,
                        borderColor: 'rgb(0, 0, 0)'
                    }
                }
            }

The full code from my web that render the web component if it helps:

flexygo.ui.wc.flxChart = function () {

    return {
        htmlItem: null,

        moduleId: null,
        canvas2:null,

        refresh: function () {

            this.init();

        },



        init: function () {
            var ctx = this;

            ctx.htmlItem.html('<div><canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas></div>');

            ctx.render();

        },
        render: function(){
            var ctx2 = document.getElementById("myChart2");
            var dataBubble = {
                datasets: [
                    {
                        label: 'First Dataset',
                        data: [
                            {
                                x: 20,
                                y: 30,
                                r: 15
                            },
                            {
                                x: 40,
                                y: 10,
                                r: 10
                            }
                        ],
                        backgroundColor: "#FF6384",
                        hoverBackgroundColor: "#FF6384",
                    }]
            };
            var optionsBubble = {
                elements: {
                    points: {
                        borderWidth: 1,
                        borderColor: 'rgb(0, 0, 0)'
                    }
                }
            }
            var myBubbleChart = new Chart(ctx2,{
                type: 'bubble',
                data: dataBubble,
                options: optionsBubble
            });
}

I'm new on web design and probably there is a better way to be able to pass parameters to the function that doing it by a canvas so feel free to correct,will apreciate it

Answer 1

i finally got it with

if (ctx.htmlItem.attr('color') && ctx.htmlItem.attr('color') != '') {
                var color = ctx.htmlItem.attr('color');}

that checks it from the web component call