How to add Text-transform on text in canvas using kinetic js?

Question

I want to know how could i convert text into uppercase in canvas using kinetic js.

Here is my code for canvas with image and text:

top_text_val = "INSERT TOP TEXT";   //Default top text on meme
bottom_text_val = "INSERT BOTTOM TEXT";  //Default bottom text on meme

var stage = new Kinetic.Stage({
    container: 'meme-img',  
    width: 735,             //width of container
    height: 540,            //height of container
});
var layer = new Kinetic.Layer();  //new object of kinetic layer

var imageObj = new Image();  //new image object to load image
var top_text;
var bottom_text; 

//image onload event code
imageObj.onload = function() {
    var image_shape = new Kinetic.Image({  //set image display dimensions
        image: imageObj,
        width: 735,
        height: 540
    });
    top_text = new Kinetic.Text({  // Code to display top default text on meme image
        x: 100,
        y: 35,
        text: top_text_val,
        fontSize: 80,
        fontFamily: 'Impact',
        fill: '#fff',
        align: "center",
        stroke: 'black',
        strokeWidth: 4,
    });

    layer.add(image_shape);   // add the shape to the layer
    layer.add(top_text);     // add top text to the layer
    stage.add(layer);  // add the layer to the stage

};
if(image_link.trim().length>0)  imageObj.src = image_link;

Now i want to set text and want to set text in Uppercase on keyup event of some text box. Please refer below code for same:

$('#txtTop').on('keyup',function(){
   var value = $(this).val();
   top_text.setText(value);
   if($('#chkAllCaps').is(':checked')){
         //here i need code to set uppercase text-transform
   }
   layer.draw(); 
});

I have tried text-transform also but it is not working.

Please kindly help me out.

Thanks!!

Answer 1

string.toUpperCase() would work in this case. The toUpperCase() method converts a string to uppercase letters and it would be better to add mouse click event on #chkAllCaps element and make a function for render.

This is jsfiddle: http://jsfiddle.net/6t7ohbnh/1/

Javascript

$('#txtTop').on('keyup', function() {
    render();
});

$('#chkAllCaps').on('click', function() {
    render();
});

function render(){
    var value = $('#txtTop').val();
    if ($('#chkAllCaps').is(':checked')) {
        top_text.setText(value.toUpperCase());
    }else{
        top_text.setText(value);
    }
    layer.draw();                
}