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();