changeGridLines: function(color,opacity) {

    if (!color.match(/.*d.*/g)){
        console.log("invalid color value given for calculating grid opacity");
    }
    // hex & rgb
    else if (color.indexOf('rgba') === -1) {

        if (color.indexOf('#') !== -1) {
            color = utility.hexToRgb(color);
        }

        color = color.slice(0, -1) + ', ' + opacity + ')';
        color = color.replace('rgb', 'rgba');
    }
    //rgba
    else if ((color.indexOf('rgba') !== -1)){
        color = color.substring(0,color.lastIndexOf(',')) + ', ' + opacity + ')';
    }
    else {
        console.log("invalid color value given for calculating grid opacity");
    }

    this.tdArray.forEach(function(td) {
        td.style.border = '1px solid';
        td.style.borderColor = color;
    });
},
clearGridLines: function() {
    this.tdArray.forEach(function(td) {
        td.style.border = 'none';
    });
},
draw: function(elem,color) {

    // stop the function when element is not table cell (of canvas)
    if (elem.tagName !== 'TD')
        return;

    // transform brushsize to number (could be string)
    let size = +grid.brushSize.value;

    // basic draw the cell when brushsize = 1 cell
    if (size === 1)
        elem.style.backgroundColor = color;
    // if brushsize is bigger than 1, calculate the according other cells that have to be painted as well. starting from first cell going right and down
    else if (size > 1) {
        let tds = elem.parentNode.childNodes;
        let trs = elem.parentNode.parentNode.childNodes;
        let currentChildNodeIndex = utility.getChildNodeIndex(elem, tds);
        let currentRowIndex = utility.getChildNodeIndex(elem.parentNode, trs);

        for (let j = 0; j < size; j++) {
            if (trs[currentRowIndex + j]) {
                tds = trs[currentRowIndex + j].childNodes;
            }

            for (let k = 0; k < size; k++) {
                if (tds[currentChildNodeIndex + k]) {
                    tds[currentChildNodeIndex + k].style.backgroundColor = color;
                }
            }
        }
    }
},