4

I'm having an issue using Pixi.js, where the lineTo method seems to draw lines that aren't specified. The bad lines aren't uniform width (seem to taper off towards the ends) and are much longer than they should be. Example jsfiddle showing the problem here:

http://jsfiddle.net/b1e48upd/1/

var stage, renderer;

function init() {

    stage = new PIXI.Stage(0x001531, true);
    renderer = new PIXI.WebGLRenderer(800, 600);
// renderer = new PIXI.CanvasRenderer(400, 300);

    document.body.appendChild(renderer.view);
    requestAnimFrame( animate );

    graphics = new PIXI.Graphics();
    stage.addChild(graphics);

    graphics.beginFill(0xFF0000);
    graphics.lineStyle(3, 0xFF0000);

    graphics.moveTo(200, 200);
    graphics.lineTo(192, 192);
    graphics.lineTo(198, 183);
    graphics.lineTo(189, 197);

}

function animate() {
    requestAnimFrame( animate );
    renderer.render(stage);
}

init();

Using the canvas renderer gives correct results.

Trying to search for this problem, I've gathered that the WebGL renderer may have an issue with non-integer values (shown in the question here: Pixi.js lines are rendered outside dedicated area), and I've also seen that sending consecutive lineTo commands to the same coordinates will cause issues, but my example doesn't have either of those.

Community
  • 1
  • 1
GBagley
  • 41
  • 1
  • 2
  • I've had lots of issues with graphics and the WebGLRenderer. It's not just with non-integers. This very simple rounededRectangle will not even render with WebGL http://jsfiddle.net/b1e48upd/10/ In your case, could you just remove the lineStyle()? – Karmacon Jan 05 '15 at 21:07

0 Answers0