try
$(document).on("keypress", function (e) {
if(e.keyCode == 32)
{
$(".editable").append("<span>"+" "+"</span>");
}
else if(e.keyCode == 8)
{
$(".editable span:last-child").remove();
}
else {
var s = String.fromCharCode(e.which);
var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
$(".editable").after($("img")).append("<span class='text' style='color:"+color+";'>"+s+"</span>");
}
});
and add class for shadow effect to text.
.text
{
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
}