Text on image

var campaignImage = {
  options : {
    bgOpacity  : 0.7,
    fontFamily : 'Arial, sans-serif',
    fontSize   : 34,
    textColor  : '#fff'
  },
  convert : function(element, text){
    var canvas = this.imageToCanvas(element);
      canvas = this.rectangle(canvas, text);
      canvas = this.text(canvas, text);

    return this.canvasToImage(canvas, element);
  },
  imageToCanvas : function(element){
    var canvas    = document.createElement('canvas');
      var context   = canvas.getContext("2d");
      canvas.width  = element.width;
      canvas.height = element.height;

      context.drawImage(element, 0, 0);

      return canvas;
  },
  rectangle : function(canvas){
    var context = canvas.getContext("2d");

    context.beginPath();
    context.globalAlpha = this.options.bgOpacity;
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "black";
    context.fill();
    context.globalAlpha = 1.0;

    return canvas;
  },
  text : function(canvas, text){
    var context = canvas.getContext("2d");

    context.fillStyle   = this.options.textColor;
    context.font        = this.options.fontSize + "px " + this.options.fontFamily; 

    context.textAlign   = "center";

    var breakline = text.split("\n");
    if(breakline.length > 0){
      for(line in breakline){
        context.fillText(breakline[line], canvas.width/2, (canvas.height/2) + line*this.options.fontSize);
      }
    }

    return canvas;
  },
  canvasToImage : function(canvas, element){
    var dataURL = canvas.toDataURL();

    element.src = dataURL;
  }
};

//Usage
//campaignImage.convert(document.querySelector('.campDetailImg'), "Text");