Как на canvas увеличить толщину линий картинки?

Question

[EryTi]

Есть такая картинка в формате bas64

Как можно через canvas увеличить толщину линий из которых создается надпись?

Answer 1

[4ce]

Привет всем!
автор вопроса я не совсем понял твой вопрос...

Если задача увеличить толщину линии в canvas то наверное
line width canvas
https://www.google.com/search?q=line+width+canvas
CanvasRenderingContext2D.lineWidth
https://developer.mozilla.org/en-US/docs/Web/API/C...
|||
CanvasRenderingContext2D.lineWidth=16;
где "16" толщина линии в пикселях...

Пример похожей рисовалки можно найти на Хабре:
https://habr.com/ru/company/vdsina/blog/523306/
|||

Код в виде .html страницы из статьи (это спойлер нажми на эту строчку чтобы развернуть)

<canvas id="v">
<script>
d=document, // shortcut for document
d.body.style.margin=0, // reset style
f=0, // mouse-down flag
c=v.getContext("2d"), // canvas context
v.width=innerWidth, // make canvas element fullscreen
v.height=innerHeight,
//vvvvvvvvvvvvv
c.lineWidth=16, //<= make lines a bit wider
//^^^^^^^^^^^^^
x=e=>e.clientX||e.touches[0].clientX, // get X position from mouse/touch
y=e=>e.clientY||e.touches[0].clientY, // get Y position from mouse/touch
d.onmousedown=d.ontouchstart=e=>{f=1,e.preventDefault(),c.moveTo(x(e),y(e)),c.beginPath()},
d.onmousemove=d.ontouchmove=e=>{f&&(c.lineTo(x(e),y(e)),c.stroke())},
d.onmouseup=d.ontouchend=e=>f=0
</script>

Но в вопросе уже готовая картинка возможно нужно увелечить линии именно в ней через canvas...
^эту часть ответа считаю сложной и не обязательной...
|||
Для этих целей я поместил картинку в canvas и написал(переписал) svg фильтр на основе этой статьи:
https://tympanus.net/codrops/2019/01/22/svg-filter...
^если честно не уверен что составлю по памяти такой же не запутавшись...
|||
Для понятности значения в фильтре которые могут быть названы как угодно я отметил единичками в конце

Код в виде .html странцы (изображение должно быть в той же папке что и исполняемый файл и это спойлер нажми на эту строчку чтобы развернуть)

<title>canvas svg filter</title>
<svg width="0" height="0">
<filter id="outline1" color=red>
<feMorphology result="shadowFiler1" operator="dilate" radius="4"/>
<!--                                            filter radius ^-->
<!--vvvvv if color no need you can delete this vvvvv-->
<feFlood flood-color="#44CCEE"  result="shadowColor1"/>
<!--     ^^^^^^^^^^^^^ color ^                      -->
<feComposite in="shadowColor1" in2="shadowFiler1" operator="in" result="colorAndShadow1"/>
<!--^^^^^^^^^^^^^^^^^^^^^^ if color not need you can delete this ^^^^^^^^^^^^^^^^^^^^^^-->
<feMerge>
<feMergeNode in="colorAndShadow1"/>
<feMergeNode in="SourceGraphic"/><!-- this line not need if you want only filter color-->
</feMerge>
</filter>
</svg>
<canvas id="canvas1"></canvas>
<img id="image1" src="6422b38e42f09806476147.png"  style="display:none">
<script>
canvas0=canvas1.getContext('2d');
image1.onload=function(){
canvas1.width=image1.width;
canvas1.height=image1.height;
canvas0.filter = 'url(#outline1)';// Draw image with filter
canvas0.drawImage(image1,0,0,image1.width,image1.height);// Draw image with filter
}
</script>

|||

Кааартинки!!! (это спойлер нажми на эту строчку чтобы развернуть)

|||
Картинка с тенью из вопроса

|||
Картинка новым цветом и утолщённой линей из вопроса

|||
Картинка с утолщённой линей из вопроса

~_^ Удачи!