CODEWITHSUNDEEP
htmlhtml5-canvasdrawtext
Geordie Dave
Geordie Dave

Reputation: 65

Multiline text on HTML5 canvas

So I'm trying to create a Meme generator using the HTML5 canvas. I understand I can write on the canvas using the following:

ctx.filltext()

However, I can only write on the canvas once. Does anyone know how I could write on the canvas more than once or even twice as in multiple times. As with Meme generators they have one line of text at the top and one at the bottom of the image. If it's not possible could anyone let me know or point me in the direction of a tutorial/answer that could let me write on top of an image with text including changing the font and font size plus top/bottom, left/right.

Thanks to anyone who can help.

Upvotes: 1

Views: 7889

Answers (1)

markE
markE

Reputation: 105015

You can create a function that draws text given your desired styling arguments:

enter image description here

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

drawText('This is the top',canvas.width/2,20,24,'verdana');
drawText('This is the bottom',canvas.width/2,canvas.height-20,16,'Courier');

function drawText(text,centerX,centerY,fontsize,fontface){
  ctx.save();
  ctx.font=fontsize+'px '+fontface;
  ctx.textAlign='center';
  ctx.textBaseline='middle';
  ctx.fillText(text,centerX,centerY);
  ctx.restore();
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>

Upvotes: 5

Related Questions