Edit in JSFiddle

var text_canvas_dom = document.getElementById('text-canvas'),
		text_canvas = text_canvas_dom.getContext('2d'),
    profile_picture = document.getElementById('profile-picture'),
    profile_displayname = document.getElementById('profile-display_name');
    
    
function onKeyup(){    
		var text_value = profile_displayname.value,
    		size = 60,
        font = 'Arial',
        text_x = 10,
        text_y = text_x;
    
    text_canvas.canvas.width = size;
    text_canvas.canvas.height = size;
   	text_canvas.font = size+'px '+font;
    text_canvas.fillStyle='white';
    text_canvas.fillText(text_value, size*0.05, size*0.9);
    profile_picture.src = text_canvas.canvas.toDataURL();
}

document.getElementById('profile-display_name').addEventListener('keyup', onKeyup, false);

onKeyup();