document.write simply output the content in canvas as it were regular HTML content. if you want to make it appear on a specific place you would have to use HTML to markup the printed content, either when pressing the button or when calling document.write while loading document. so for example, you pass the string to your method box and in the method you wrap the string with HTML:
function box(a){
document.write("<span style='[i]here place css rules for positioning element[/i]'>", a, "</span>");
}
however, the truth is that the function isn't replacing the string for the button. instead, it completely clear the content in browser to print new content. so, document.write is bad for appending new content to canvas. you might want to try with innerHTML so that it don't appear that string replace the button:
<input ... />
<p id='newcontent'></p>
<script>
function box(a){
document.getElementById('newcontent').innerHTML = a;
}
</script>