Canvas Ctx.fillStyle, как сделать динамический цвет?

Question

[olol777]

Здравствуйте! Суть такая, из формы берется текст и преобразуется в картинку этим скриптом:

var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');
document.getElementById('sign').addEventListener('keyup', function (){
    tCtx.canvas.width = tCtx.measureText(this.value).width;
    tCtx.font = "50px serif"; 
    tCtx.fillStyle = "#FFFFFF";
    tCtx.fillText (this.value, 0, 80);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);
}, false);

Есть 3 кнопки картинки, у каждой есть data-color:

<img id="black" class="activeColor" data-color="black" data-colorreal="Черный" src="images/icon_black.png" style="border-radius: 50px; box-shadow: rgba(122, 122, 122, 0.901961) 0.1em 0.1em 9px;" hspace="10" vspace="10">
    <img id="white" data-color="white" data-colorreal="Белый" src="images/icon_white.png" style="border-radius: 50px; box-shadow: rgba(122, 122, 122, 0.901961) 0.1em 0.1em 9px; " hspace="10" vspace="10">
    <img id="grey" data-color="white" data-colorreal="Серый" src="images/icon_grey.png" style="border-radius: 50px; box-shadow: rgba(122, 122, 122, 0.901961) 0.1em 0.1em 9px;" hspace="10" vspace="10">

Как сделать так, чтобы при клике на кнопку изменялся tCtx.fillStyle в зависимости от data-color?

Answer 1

[twobomb]

Как вариант https://jsfiddle.net/twobomb/pusxgghv/