Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

131
Views
How to change the line cap in PIXI.js?

I'm trying to draw a line with rounded corners onto a Graphics object with PIXI.js. I use the moveTo() and lineTo() commands to draw the line, but that causes it to come out with butt corners (pointy, square). Their documentation says you can use the lineStyle() method and pass it an object, and in there you can specify cap and set it to one of three values from an enum called PIXI.LINE_CAP. I tried this:

myGraphics.lineStyle({
    cap: PIXI.LINE_CAP.ROUND
});

and I'm told that LINE_CAP is not defined. I import PIXI.js from this link https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js, and if I do a ctrl + F on that file "LINE_CAP" does not appear anywhere.

Do I need to import another part of the library in order to access this enum? I import the graphics-extra file for the drawTorus() method anyway, and there is no LINE_CAP in there either. I also printed out the _lineStyle property of my graphics object and there doesn't even appear to be any lineCap or cap property there anyway? (Nor is their a lineWidth or anything similar)

Also, this may be unrelated, but I can't seem to get the lineStyle() method to do anything at all, not even to change the color or width of my lines. Was this entire concept deprecated or something and they just haven't updated their docs? If so, how should I go about drawing a line with rounded caps?

Up until now I've used the arc() method to put a round cap on the end, and it's worked fine, but I have performance concerns when using that and I'd rather avoid it if possible. (If I manually place the arc then JavaScript has to do the computations, whereas I assume changing the linecap can leverage WebGL to render significantly faster)

Here is where the documentation speaks of this enum. Perhaps if there is a way to find the values contained in these enum values I could just use those values directly instead of relying on the enum?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

It seems that LINE_CAP was added in or around v5.3.0 of PIXI. The version you are using (v5.1.3) was released in September 2019, so it would be recommended to update to a newer version (hopefully there isn't many, if any, breaking changes between 5.1 and 5.3).

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!