text-decoration : underline …… But what to do in case of Canvas text.
Recently I had to show some texts on canvas, requirement was it should be underlined. I started googling and did not find any solution for that as canvas does not support any such property. Now the only option was some work-around , I did it and would like to share it with you.
Disclaimer : I am not a javascript expert, just a beginner in the world of javascript. So, if you find any thing wrong or you have some suggestions write me at durgesh.priyaranjan@gmail.com or mention it in the comment section below.
What I had?
A html canvas:
<canvas id="myCanvas" width="578" height="200"></canvas>
Requirements:
a) Text to be displayed : “ScriptStock”
b) The font size should be 30pt
c) Text color should be blue
d) Text alignment can be any of the three : left, center,right
e) Font family should be Calibri.
What I did to display the text on canvas?
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);
The utility function for underline:
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(); }
You can play with the above implementation at JSFiddle.
Please let me know if you have any better idea for same.
Keep Visiting.
First of all, thank you for a solution!
Is it also applicable for multi-line texts? It would need a few changes wouldn’t it?
Of-course José, it wont work for multiline texts in current format, as canvas directly doesn’t support line break feature. First you will need to wrap the text manually using and then you will have to apply it. If u need more help let me know, I will try to help you.
Wow, marvelous weblog layout! How lengthy have you ever been blogging for?
you made blogging glance easy. The whole glance of your site is fantastic, let
alone the content material!