Html Canvas add Text Or Image in Rendered Image

Question

i am trying to add add text (water mark) in canvas generated image

here is my code.

 html2canvas($("#frame"), {
             onrendered: function (canvas) {

                $("#outputImage").html(canvas);

             }

what i should add in this code to add watermark mark in generated image

Answer 1

Inside the handler do the following:

html2canvas($("#frame"), {
  onrendered: function (canvas) {

    var ctx = canvas.getContext("2d");       // get 2D context of canvas

    ctx.textBaseline = "top";                // start with drawing text from top
    ctx.font = "20px sans-serif";            // set a font and size
    ctx.fillStyle = "red";                   // set a color for the text
    ctx.fillText("WATERMARK", 20, 20);       // draw the text at some position (x, y)

    $("#outputImage").html(canvas);

  }
}

There is also alignment modes using:

ctx.textAlign = "center";  // default: "start" = left-to-right/right-to-left 
                           // depending on language, override with "left" or "right"