New to Kendo UI for jQuery? Download free 30-day trial

Add Overlay Text in ImageEditor On Top of an Image


Product Progress® Kendo UI® ImageEditor for jQuery



How can I add overlay text over an image in ImageEditor?


Adding an overlay text over image could be achieved by utilizing CanvasRenderingContext2D through the ImageEditor's methods. By getting the Image's canvas element and context object, the developer can customize the content placed on the image.


The following example demonstrates how a custom command can be created in the ImageEditor toolbar for adding a custom text over a loaded image.

    <div id="imageEditor"></div>

        toolbar: {
          items: [
              type: "button",
              text: "Add Overlay Text",
              icon: "launch",
              enable: true,

      $(document).ready(function () {

        var imageEditorNS = kendo.ui.imageeditor;

        imageEditorNS.commands.AddOverlayTextImageEditorCommand = imageEditorNS.ImageEditorCommand.extend({
          exec: function () {
            var that = this,
                options = that.options,
                imageeditor = that.imageeditor,
                canvas = imageeditor.getCanvasElement(),
                ctx = imageeditor.getCurrent2dContext(),
                image = imageeditor.getCurrentImage();

            //If there's an image
            if (image){

                //clear the contents
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                //Draws the image to te canvas
                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

                //Custom text is configured
                ctx.fillStyle = "#ffffff";
                ctx.font = "100pt Calibri";
                ctx.fillText('My Custom Text', canvas.width/2, canvas.height/2);

                //Draws the image instance

                //draw the canvas element with an image

              }).fail(function (ev) {

                //trigger error
                imageeditor.trigger("error", ev);
            } else {
              kendo.alert("No Image Present");

See Also

In this article