Bug:

[bingomanatee]

Current Behavior

Some of your APIs do not work as advertised.

The is a "draw grid" method that I use to draw a regular grid.

two things I wanted to call attention to.

1. The grid doesn't draw unliess I call "endFill()" - which is odd in that (a) its deprectaed and (b) I'm not actually filling anything
2. The alpha on the setStrokeStyle doesn't translate through unless I re-set it afterwards onto the stroke style

Expected Behavior

1. you should be able to set alpha in setStroke
2. you shluldn't need to endFill to see the grid

Steps to Reproduce

import * as PIXI from 'pixi.js';
import { Point } from './observeMouse';
import { ca } from '../../../utils/c';

type Props = {
  width: number;
  height: number;
  gridSize: number;
  color: number;
  alpha: number;
  interval?: number;
  skipInterval?: number;
};

/**
 * Draws a grid on a PIXI.Graphics instance.
 *
 * @param {PIXI.Graphics} graphics - The PIXI Graphics object to draw on.
 * @param {Object} options - Configuration options for the grid.
 * @param {number} options.width - Width of the grid area.
 * @param {number} options.height - Height of the grid area.
 * @param {number} options.gridSize - Distance between grid lines.
 * @param {number} options.color - Stroke color for the grid lines.
 * @param {number} options.alpha - Stroke alpha for the grid lines.
 * @param {number} [options.interval=1] - Multiplier for grid intervals (used for high-density grids).
 */
export function drawGrid(
  graphics: PIXI.Graphics,
  {
    width,
    height,
    gridSize,
    color,
    alpha,
    interval = 1,
    skipInterval,
  }: Props,
  mousePoint?: Point,
) {
  graphics.clear();
  graphics.setStrokeStyle(1, color, alpha);
  graphics.strokeStyle.alpha = alpha;
  let i = 0;
  // Draw vertical grid lines
  for (
    let x = 0;
    x < width;
    x += gridSize * interval
  ) {
    if (skipInterval && !(i % skipInterval)) {
      i += 1;
    } else {
      graphics.moveTo(x, 0);
      graphics.lineTo(x, height);
      i += 1;
    }
  }

  i = 0;
  // Draw horizontal grid lines
  for (
    let y = 0;
    y < height;
    y += gridSize * interval
  ) {
    if (skipInterval && !(i % skipInterval)) {
      i += 1;
    } else {
      graphics.moveTo(0, y);
      graphics.lineTo(width, y);
      i += 1;
    }
  }
  graphics.closePath();
  graphics.endFill();
}

Environment

• pixi.js version: e.g. 7.1.0 "pixi.js": "^8.5.2",
• Browser & Version: e.g. Chrome 108
• Chrome
• OS & Version: e.g. Ubuntu 22.04
• OSX
• Running Example: e.g. https://pixiplayground.com/

Possible Solution

No response

Additional Information

No response

[GoodBoyDigital]

heya, if you call

graphics.stroke()

instead of graphics.endFill()

does that work? thanks!