Trying to add text in canvas

Question

I am working on a PWA, which will be used to conduct surveys, so what I'm doing is, I'm capturing a snapshot from a video(within the app) and saving it in a canvas, which works fine.

Now I need to add date, time and geo-coordinates on it.

My Javascript code

var video = document.querySelector('video');
var takenPhotosDiv = document.getElementById( "taken-photos" );


var button = document.querySelector('button');
button.onclick = function() {
  drawCanvas();
};


var drawCanvas = function(){
  var canvas = window.canvas =  document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
   canvas.getContext('2d').fillText( "30-08-2017" + "   " + "15:25" + "  " + "(79.85858454, 17.56852655)", 50, 150 );
  takenPhotosDiv.appendChild( canvas );
}

The above code works fine and it does get close to what's being expected, here's the sample output of the above code

The final text-format should look like this (the text bar should be at the bottom of the image and not in the middle and with much bigger font)

PS: I don't just have to display this in the above mentioned format, even need to save and push it on Firebase later.

Edit:

var addTextToCanvas = function( canvas ){
  canvas.lineWidth = 2;
  canvas.fillStyle = "blue";
  canvas.font = "bold 20px sans-serif";
  canvas.textBaseline = "bottom";
  canvas.fillText( "30-08-2017" + "   " + "15:25" + "  " + "(79.85858454, 17.56852655)", 0, 100 );
  return canvas;  
};

I tried this, but the font and font size remained the same.

This function is called from drawCanvas(), just before appending it to div, since it didn't work, I simply added called fillText on the canvas there itself

Edit 2:

Answer 1

Try this

var canvas = window.canvas =  document.createElement('canvas');
var ctx = canvas.getContext('2d'); 

var text = "30-08-2017\n15:25\n(79.85858454, 17.56852655)";
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText(text, canvas.width/2, canvas.height/2); 

Answer 2

Make sure that the methods and properties are set on the context not the canvas element itself.

We also need to calculate the actual vertical position of the text. Since it's aligned to the bottom we can use the height of the canvas minus some bottom padding:

var y = canvas.height - 10;

So, for example:

var addTextToCanvas = function( context ) { // pass in 2D context
  var y = context.canvas.height - 10;
  context.fillStyle = "blue";
  context.font = "bold 20px sans-serif";
  context.textBaseline = "bottom";
  context.fillText( "30-08-2017"+"   "+"15:25"+"  "+"(79.85858454, 17.56852655)", 10, y );
  return context;  
};

or if you prefer to pass in the canvas:

var addTextToCanvas = function( canvas ) {
  var context = canvas.getContext("2d");
  var y = canvas.height - 10;
  context.fillStyle = "blue";
  context.font = "bold 20px sans-serif";
  context.textBaseline = "bottom";
  context.fillText( "30-08-2017"+"   "+"15:25"+"  "+"(79.85858454, 17.56852655)", 10, y );
  return context;  
};

The lineWidth doesn't do anything here so it can be removed.

I would recommend that you store the context once globally. It's the same context you get each time anyways but there is more overhead requesting it each time it will be used.

Functional example:

 var ctx = c.getContext("2d"); var addTextToCanvas = function( context ) { context.fillStyle = "blue"; context.font = "bold 20px sans-serif"; context.textBaseline = "bottom"; var y = context.canvas.height - 10; context.fillText( "30-08-2017"+" "+"15:25"+" "+"(79.85858454, 17.56852655)", 10, y ); return context; }; addTextToCanvas(ctx); 

 #c {border: 1px solid #999} 

 <canvas id=c width=600 height=180></canvas> 

And finally, to extract as image the call needs to be made on the canvas element not context (can be confusing):

var dataUrl = canvas.toDataURL();   // saves out PNG image

or for JPEG:

var dataUrl = canvas.toDataURL("image/jpeg", 0.75);