Question

Kind of stuck with this thing, that’s why need help please. I am using HTML5 and JavaScript to insert text on an image and create a new image with the text on it. Everything is fine if I am adding the text manually, however if I am trying to pass the text to the function as a value, its not happening. Here’s the function code below

 function draw_text(topt,bott){
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
    var img = new Image();
    img.src = "testimage.jpg";
    img.onload = function() 
    {
    context.drawImage(img, 0, 0);
    draw_text();
    };
    var toptext =  this.topt;
    var bottomtext =  this.bott;
    context.font = "12px Arial";
    context.fillStyle = "white"; 
    context.strokeStyle = 'black';
    context.fillText(toptext, (img.width-context.measureText(toptext).width)/2, 40);
    context.strokeText(toptext, (img.width-context.measureText(toptext).width)/2, 40);
    context.fillText(bottomtext, (img.width-context.measureText(bottomtext).width)/2, 350);
    };

And I am calling this function by

draw_text('Text 1','Text 2');

But I either the canvas is not visible at all or it comes with the text ‘Undefined’. What am I doing wrong? By the way, if it’s any important I am doing this code in a codeigniter view file.

Answer 1

You are not using ‘this’ correctly.

Replace:

var toptext =  this.topt;
var bottomtext =  this.bott;

With:

var toptext =  topt;
var bottomtext =  bott;

***Also, I just noticed you have a recursive call to “draw_text()” with no parameters in the definition of draw_text, which is also a problem.