Hi,
In my code, I'm automatically creating a destination node if a link doesn't have a destination node. I'm using linkCreated event for that:

export const handleLinkCreated = (diagram, args) => {

    const link = args._link;
    const destination = args._destination;
    link.text = DEFAULT_LINK_TEXT;
    link.brush = ARROW_HEAD_COLOR;
    link.zIndex = LINK_ZINDEX;

    if(!destination) {
        const linkTargetPoint = link.points.at(-1);

        const destinationNode = diagram.factory.createShapeNode(linkTargetPoint._x, linkTargetPoint._y, MOCK_RECTANGLE_UNIT.size, MOCK_RECTANGLE_UNIT.size);
        destinationNode.allowOutgoingLinks = false;

        const anchorPatternTargetNode = new mfDiagramming.AnchorPattern([
            new mfDiagramming.AnchorPoint(MOCK_RECTANGLE_UNIT.inPortPosition.x, MOCK_RECTANGLE_UNIT.inPortPosition.y, true, false, mfDiagramming.MarkStyle.Custom, ANCHOR_POINT_COLOR, ANCHOR_POINT_SIZE),
        ]);
        destinationNode.addLabel(DEFAULT_UNIT_TEXT).setCenterPosition(0, -MOCK_RECTANGLE_UNIT.size / 2 - 2);
        destinationNode.anchorPattern = anchorPatternTargetNode;
        link.setDestination(destinationNode);
    }


    link.route();
}  

and here is my implementation of the function that renders a custom anchor point:

export const handleDrawAnchorPoint = (_sender, e) => {
    const p = e.location;
    const ctx = e.context;
    const CIRCLE_RADIUS = 0.5;
    const STROKE_WIDTH = 0.5;
    const OFFSET = 0.5;

    ctx.beginPath();
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.strokeStyle = 'rgb(255,255,255)';
    ctx.lineWidth = STROKE_WIDTH;

    ctx.ellipse(p.x - CIRCLE_RADIUS + OFFSET, p.y - CIRCLE_RADIUS + OFFSET, CIRCLE_RADIUS * 2, CIRCLE_RADIUS * 2, Math.PI / 4, 0, 2 * Math.PI);

    ctx.fill();

    ctx.stroke();

}
 

The problem is that my anchor point in being drawn on top of the link. I want it to be between the destination node and the link (the link should be on top).

The attachment contains my current result.
Could you advise me on how to achieve that?

LINK_ZINDEX value is 1000. I've also added a line for setting zIndex for destination node:

    if(!destination) {
        const linkTargetPoint = link.points.at(-1);

        const destinationNode = diagram.factory.createShapeNode(linkTargetPoint._x, linkTargetPoint._y, MOCK_RECTANGLE_UNIT.size, MOCK_RECTANGLE_UNIT.size);
        destinationNode.allowOutgoingLinks = false;

        const anchorPatternTargetNode = new mfDiagramming.AnchorPattern([
            new mfDiagramming.AnchorPoint(MOCK_RECTANGLE_UNIT.inPortPosition.x, MOCK_RECTANGLE_UNIT.inPortPosition.y, true, false, mfDiagramming.MarkStyle.Custom, ANCHOR_POINT_COLOR, ANCHOR_POINT_SIZE),
        ]);
        destinationNode.addLabel(DEFAULT_UNIT_TEXT).setCenterPosition(0, -MOCK_RECTANGLE_UNIT.size / 2 - 2);
        destinationNode.anchorPattern = anchorPatternTargetNode;
        link.setDestination(destinationNode);
        destinationNode.zIndex = 0;
    }

 

But nothing changed.

Thanks for the solution Now it works perfectly!