Skip to content

How to create a text underline function in Canvas

December 24, 2014

I had found a recent post, a useful function that allows you to write text with underline in HTML5 canvas which apparently is not a one liner to write in Javascript. Here is the Javascript code: –

var textUnderline = function(context, text, x, y, color, textSize, align){

  //Get the width of the text
  var textWidth =context.measureText(text).width;

  //var to store the starting position of text (X-axis)
  var startX;

  //var to store the starting position of text (Y-axis)
  // I have tried to set the position of the underline according 
  // to size of text. You can change as per your need
  var startY = y+(parseInt(textSize)/15);

  //var to store the end position of text (X-axis)
  var endX;

  //var to store the end position of text (Y-axis)
  //It should be the same as start position vertically. 
  var endY = startY;

  //To set the size line which is to be drawn as underline.
  //Its set as per the size of the text. Feel free to change as per need.
  var underlineHeight = parseInt(textSize)/15;

  //Because of the above calculation we might get the value less 
  //than 1 and then the underline will not be rendered. this is to make sure 
  //there is some value for line width.
  if(underlineHeight < 1){
    underlineHeight = 1;
  }

  context.beginPath();
  if(align == "center"){
    startX = x - (textWidth/2);
    endX = x + (textWidth/2);
  }else if(align == "right"){
    startX = x-textWidth;
    endX = x;
  }else{
    startX = x;
    endX = x + textWidth;
  }

  context.strokeStyle = color;
  context.lineWidth = underlineHeight;
  context.moveTo(startX,startY);
  context.lineTo(endX,endY);
  context.stroke();
}

Here is the sample code utilising the function: –

var canvas = document.getElementById("myCanvas");//get canvas element as js object
var context = canvas.getContext("2d");//get canvas context to play with it

//initialize the variables with the required data
var text = "ScriptStock";
var textAlign = "center";
var textColor = "blue";
var fontSize = "60pt";
var fontFamily = "Calibri";

//Set the position of the text on canvas
//I am setting it as center of the canvas. You can set as per your need.
var x = canvas.width / 2;
var y = canvas.height / 2;

//Set the canvas context properties
context.font = fontSize + " " + fontFamily;
context.textAlign = textAlign;
context.fillStyle = textColor;

//Display the text on canvas
context.fillText(text, x, y);

//Call the function to underline the text
//We need to pass some values to our function so that it can perform the necessary calculations.
textUnderline(context,text,x,y,textColor,fontSize,textAlign);
Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: