CODEWITHSUNDEEP
html5-canvaswatermark
Allex
Allex

Reputation: 141

Html Canvas add Text Or Image in Rendered Image

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

Upvotes: 0

Views: 4335

Answers (2)

user1693593
user1693593

Reputation:

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"

Upvotes: 3

nkron
nkron

Reputation: 19791

Check out Canvas.globalCompositeOperation. If you set it to the string 'lighter', it will lighten the pixels drawn by the next drawing command (such as fillText()). Here's a sample

<canvas id='canvas'></canvas>
<script>
  var img = new Image();
  img.src = 'http://www.javascripture.com/pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0, canvas.width, canvas.height);

    // Draw the Watermark
    context.font = '48px sans-serif';
    context.globalCompositeOperation = 'lighter';
    context.fillStyle = '#444';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText('watermark', canvas.width / 2, canvas.height / 2);
  };
</script>

Upvotes: 2

Related Questions