.. role:: ts-api-decorator

############################
CustomDrawOntoCanvasCallback
############################

.. js:module:: cee.mrk
   :noindex:

.. container:: ts-api-section

   .. js:class:: 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:**


      .. code-block:: javascript

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




