Две картинки
Без размытия - https://yastatic.net/www-skins/_/UBOZSYh5Ea-ZGg4kQ...
и с размытием - https://yastatic.net/www-skins/_/nwpWSk0EIqn8I8S94...

Нужно уметь ставить фон блокам.

Еще есть css-фильтры - https://developer.mozilla.org/ru/docs/Web/CSS/filter
Важно помнить, что действуют они именно на элемент, а не на то, что под ним.

UPD. Пример мутной панельки
https://jsfiddle.net/Tenebrius/pus9e7vg/2/

Как вариант, использовать calc()
https://jsfiddle.net/cfsgqfy1/

Ответ оказался проще, чем я думал. Нужно было сериализовать форму и нужное значение добавится.

Если вкратце:

ctx.beginPath();
ctx.moveTo(x11, y11); // первая внешняя точка
ctx.lineTo(x12, y12); //вторая внешняя точка
ctx.lineTo(x13, y13); //третья внешняя точка
ctx.lineTo(x21, y21); //первая внутренняя точка
ctx.lineTo(x22, y22); //вторая внутренняя точка
ctx.lineTo(x23, y23); //третья внутренняя точка
ctx.fill();

Рисуется внешний треугольник (обходим по часовой стрелке), рисуется внутренний треугольник (против часовой), заливаем цветом.

пример: https://jsfiddle.net/08z79pje/