CustomDrawOntoCanvasCallback

class cee.mrk.CustomDrawOntoCanvasCallback()

A callback function that can be used to draw custom content onto a label.

Use this callback to override how labels are drawn. This gives you total freedom to draw any type of label. In the callback you need to resize the canvas to a size that suits your needs, and draw any text or other content onto the canvas. The label text is passed as input, but this text can be a custom markup language to control the layout of the label.

If you return if you did the drawing, return false to let the label be drawn as usual.

Example:

function myCustomDrawOntoCanvasFunction(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, text:string): boolean {
    canvas.width = 500;
    canvas.height = 150;
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    gradient.addColorStop(0, "red");
    gradient.addColorStop(0.17, "orange");
    gradient.addColorStop(0.33, "yellow");
    gradient.addColorStop(0.5, "green");
    gradient.addColorStop(0.666, "blue");
    gradient.addColorStop(1, "violet");

    // Set the fill style and draw a rectangle
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.font = "20px Comic Sans MS";
    ctx.fillStyle = "red";
    ctx.fillText(text, 50, 75);

    return true;
}

myLabelPart.setCustomDrawOntoCanvasCallback(myCustomDrawOntoCanvasFunction);