# \[vtk.js\] LineWidth with vtkLineSource

**URL:** https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173
**Category:** Web
**Created:** [September 8, 2020, 2:31pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173 "2020-09-08T14:31:51Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![banesullivan](https://discourse.vtk.org/user_avatar/discourse.vtk.org/banesullivan/32/7143_2.png) [@banesullivan](https://discourse.vtk.org/u/banesullivan)
#### Post date: [September 8, 2020, 2:31pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/1 "2020-09-08T14:31:51Z")

</div>

I am currently unable to adjust the line width of an actor with `vtkLineSource`. Is there something I am missing? Are there perhaps no line cells?

(psuedo-ish code)

```auto
lineSource = vtkLineSource.newInstance();
lineActor = vtkActor.newInstance();
mapper = vtkMapper.newInstance();
lineActor.setMapper(mapper);
mapper.setInputConnection(lineSource.getOutputPort());

lineSource.setPoint1(...)
lineSource.setPoint2(...)

```

then try to set the line width on the actor

```auto
p = lineActor.getProperty()
p.setLineWidth(10)

```

and there is no observable change after re-rendering

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [September 8, 2020, 3:45pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/2 "2020-09-08T15:45:27Z")

</div>

WebGL does not support line width. Firefox may do, but the spec does not enforce that support.

---

<div class="post-metadata">

### Author: ![ken-martin](https://discourse.vtk.org/user_avatar/discourse.vtk.org/ken-martin/32/884_2.png) [@ken-martin](https://discourse.vtk.org/u/ken-martin)
#### Post date: [September 24, 2020, 1:35pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/3 "2020-09-24T13:35:38Z")

</div>

Technically webgl does support line width but it is legal for a driver to set the maximum and minimum width to be 1.0 which some drivers do. So you can have wide lines as long as their width is 1.0 🙂 On desktop we catch this case and convert lines to triangles which we reposition using a geometry shader etc. It is a lot of work.

---

<div class="post-metadata">

### Author: ![Alireza](https://discourse.vtk.org/user_avatar/discourse.vtk.org/alireza/32/6230_2.png) [@Alireza](https://discourse.vtk.org/u/Alireza)
#### Post date: [April 2, 2021, 7:57pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/4 "2021-04-02T19:57:49Z")

</div>

@banesullivan I’m wondering what did you end up doing for having a thicker line?

I can think of using a cylinder source instead, but it cannot be dashed !

---

<div class="post-metadata">

### Author: ![banesullivan](https://discourse.vtk.org/user_avatar/discourse.vtk.org/banesullivan/32/7143_2.png) [@banesullivan](https://discourse.vtk.org/u/banesullivan)
#### Post date: [April 2, 2021, 8:51pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/5 "2021-04-02T20:51:18Z")

</div>

I used a tube filter and varied the radius with how thick I wanted the line to be

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [June 21, 2022, 7:27pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/6 "2022-06-21T19:27:49Z")

</div>

Thick/Wide lines have been [implemented](https://github.com/Kitware/vtk-js/blob/a932c53eefc2927494d9910de16810990e012440/Sources/Rendering/Core/Property/index.d.ts#L330-L337) in v24.1.0

---

<div class="post-metadata">

### Author: ![banesullivan](https://discourse.vtk.org/user_avatar/discourse.vtk.org/banesullivan/32/7143_2.png) [@banesullivan](https://discourse.vtk.org/u/banesullivan)
#### Post date: [June 21, 2022, 8:28pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/7 "2022-06-21T20:28:58Z")

</div>

@finetjul, would you provide an example or link to one in the docs?

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [June 21, 2022, 9:10pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/8 "2022-06-21T21:10:31Z")

</div>

The [Actor2D example](https://kitware.github.io/vtk-js/examples/Actor2D.html) uses a [linewidth](https://github.com/Kitware/vtk-js/blob/master/Examples/Rendering/Actor2D/index.js#L97) of 3

---

<div class="post-metadata">

### Author: ![zxrzxr](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/z/b38774/32.png) [@zxrzxr](https://discourse.vtk.org/u/zxrzxr)
#### Post date: [February 17, 2024, 8:11am UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/9 "2024-02-17T08:11:56Z")

</div>

Hi, thanks a lot for implementing this feature. I found it very useful. This increased the width of my visualization [CPlantBox Web Assembly](https://xrzhou.com/cpb).  
Just wondering, is is now possible to make each line with different linewidth?

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [February 17, 2024, 7:19pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/10 "2024-02-17T19:19:37Z")

</div>

No, currently, the line width is an actor property.

---

<div class="post-metadata">

### Author: ![zxrzxr](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/z/b38774/32.png) [@zxrzxr](https://discourse.vtk.org/u/zxrzxr)
#### Post date: [February 20, 2024, 1:19pm UTC](https://discourse.vtk.org/t/vtk-js-linewidth-with-vtklinesource/4173/11 "2024-02-20T13:19:30Z")

</div>

Thanks a lot for the reply. Looking forward to the future developments. 😃
