canvas blur shadow малому элементу

[sol_los]

может быть есть у кого мысль как сделать в определенном месте нормальную тень?
к примеру мне нужно на какой то элемент наложить тень.
создаю линию в 1px и отбрасываю тень

                    ctx.beginPath();
                    ctx.lineWidth = 1;                   
                    ctx.strokeStyle = '#fff';                  
                    ctx.shadowOffsetY = -10;
                    ctx.shadowOffsetX = 10;
                    ctx.shadowBlur =20;                   
                    ctx.moveTo(10,10 );
                    ctx.lineTo(150,10);                   
                    ctx.stroke();

Однако тень практически не видно. Необходимо создать линию в пикселей 20 что бы получить более темную и яркую тень.
Создать линию цвета нижнего элемента шириной 20 и сместить - не прокатит, т.к. закроется другой элемент.


упростил максимально что бы понятно было, вот Для просмотра ссылки Войди или Зарегистрируйся штуку пытаюсь сделать.

 

[mdss]

непонятно зачем для тени создавать отдельный малый элемент. Если просто для малого элемента создать тень, то надо уменьшить блур и смешение по осям, плюс задать более темный цвет, чем у самого элемента

      context.beginPath();
      context.lineWidth = 1;
      context.shadowColor = '#000';
      context.shadowBlur =5;
      context.shadowOffsetY = 2;
      context.shadowOffsetX = 2;
      context.moveTo(10,10 );
      context.lineTo(150,10); 
      context.stroke();

 

[sol_los]

непонятно зачем для тени создавать отдельный малый элемент. Если просто для малого элемента создать тень, то надо уменьшить блур и смешение по осям, плюс задать более темный цвет, чем у самого элемента

да я Для просмотра ссылки Войди или Зарегистрируйся рисую. в середине не могу создать нахлест правильный.
не могу понять как задать для элементов z-index, что бы один другой перекрывал но не перекрывал третий.
как только не пробовал и с globalCompositeOperation морочился - не выходит "заплести"
вот попробовал сделать два куска stroke и потом втиснуть полосу с тенью. однако по задумке там blur нужен около 30.

может есть мысль как реализовать?

вон че Для просмотра ссылки Войди или Зарегистрируйся при помощи градиента. но это же костыльный костыль

 

[mdss]

т.е. у тебя получается линия пересекается в двух местах и тебе надо сделать чтобы в одном пересечении она нахлестывалась, а во втором нет? Интересненькая задача)
Мне кажется тут надо как-то комбинировать с globalCompositeOperation, главное изначально выстроить правильную логическую цепочку

 

[sol_los]

надо сделать чтобы в одном пересечении она нахлестывалась, а во втором нет?

ага

надо как-то комбинировать с globalCompositeOperation, главное изначально выстроить правильную логическую цепочку

да вот всю голову изломал.