Custom Editor using kineticjs text underline

Question

i am trying to buil an editor using kineticjs, which has some text styling. i am stuck at a point where i have to add text underline style. Is there any option to achieve this functionality?

like -

sample text

markE markE · Accepted Answer · 2014-02-28T18:05:23

There is no built-in option for underlining.

KineticJS is built on html5 canvas and canvas has no text decoration for underlining.

The only workaround is to manually draw a line under the text

create a group
add Kinetic.Text to the group
add Kinetic.Line to the group which is used to underline the text
measure the width of the text
make the width of the line as measured
make the baselineY of the line as desired

Here is example code and a Demo: http://jsfiddle.net/m1erickson/r2ZsK/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var utilCanvas=document.createElement("canvas");
    var utilCtx=utilCanvas.getContext("2d");

    createUnderlinedText("sample text",20,50,18,"verdana",19);

    function createUnderlinedText(text,x,y,fontsize,fontfamily,baselineY){

        if(!baselineY){ baselineY=fontsize+1; }

        utilCtx.font=fontsize+" "+fontfamily;
        var textWidth=utilCtx.measureText(text).width;

        var ulText=new Kinetic.Group({
            x:x,
            y:y,
            draggable:true,
        });
        layer.add(ulText);

        var text = new Kinetic.Text({
            x:0,
            y:0,
            text:"sample text",
            fontSize:fontsize,
            fontFamily:fontfamily,
            fill: 'black',
        });
        ulText.add(text);

        var ul=new Kinetic.Line({
            points:[0,baselineY,textWidth,baselineY],
            strokeWidth:1,
            stroke:"black"
        });
        ulText.add(ul);

        layer.draw();

    }

}); // end $(function(){});

</script>       
</head>
<body>
    <div id="container"></div>
</body>
</html>

Having said all of this and IMHO...If you need a text editor, there are lots of full-featured editors out there. Choosing one of those is much easier than prodding html canvas to draw stylized text.

Custom Editor using kineticjs text underline

1 Answers