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);