Graphics2D stroke spikes on Java

Question

I'm having a problem with graphics 2d stroke, it seems no one has this problem since I have searched for something alike and no results. Here is the image.

As you can see, there are spikes on my stroke, I don't want those. Here is my code.

The class is extended to JButton and the method is paintComponent.

    Graphics2D g2d = (Graphics2D)g2.create();
    TextLayout tl = new TextLayout(getText(), getFont(), g2d.getFontRenderContext());
    Shape to = tl.getOutline(null);
    int x = (getSize().width-to.getBounds().width)/2;
    int y = (getSize().height+(to.getBounds().height-8))/2;
    System.out.println(to.getBounds().height);
    g2d.translate(x, y);
    g2d.setStroke(new BasicStroke(15.0f));
    g2d.setColor(new Color(155,155,155));
    g2d.draw(to);
    g2d.dispose();

When lowering the stroke thickness, the spike goes smaller too.

Answer 1

Have you tried using a BasicStroke with JOIN_BEVEL or JOIN_ROUND? The default join you are using is JOIN_MITER, which may be responsible for those ugly (cool?) spikes.

Answer 2

Try this

Stroke stroke = new BasicStroke(1,
    BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL, 0,
    null, 0);
g2.setStroke(stroke);

Like Franz just said this is one of those unruly behaviors of JOIN_MITER. a mitered join will extend far beyond the actual intersection of the lines.