Skip to content

Cap::Butt is rendered wrong #1063

Open
Open
@sagudev

Description

@sagudev
let stroke = Stroke {
        width: 50.0,
        join: vello::kurbo::Join::Miter,
        miter_limit: 10.,
        start_cap: vello::kurbo::Cap::Butt,
        end_cap: vello::kurbo::Cap::Butt,
        ..Default::default()
    };
    let mut path = BezPath::new();
    path.move_to(Point::new(110., 50.));
    path.line_to(Point::new(110., 60.));
    path.line_to(Point::new(100., 60.));
    scene.stroke(&stroke, Affine::IDENTITY, Color::WHITE, None, &path);

makes this:

Image

but html 2d canvas:

Image

using this code

<!DOCTYPE html>
<html>

<body>
    <canvas id="canvas" width="500" height="300"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, 500, 300);

        ctx.lineWidth = 50;
        //ctx.lineJoin = 'bevel';
        //ctx.lineCap = "round";

        ctx.strokeStyle = '#fff';
        ctx.beginPath();
        ctx.moveTo(110, 50);
        ctx.lineTo(110, 60);
        ctx.lineTo(100, 60);
        ctx.stroke();
    </script>

</body>

</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    C-classicApplies to the classic `vello` crateI-ServoRelated to Servo integration

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions