Further Explorations - HTML5 Canvas - page 601

var formElement = document.getElementById("sendChat");
formElement.addEventListener('click', sendMessage, false);
function drawScreen() {
//background
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, 500, 320);
context.fillStyle = "#000000";
context.font = "10px _sans";
context.textBaseline = "top";
//box
context.strokeStyle = '#000000';
context.strokeRect(5, 5, 490, 310);
var starty = 15;
var maxMessages = 22;
//status box
context.strokeStyle = '#000000';
context.strokeRect(345, 10, 145, 285);
var starti = 0;
if (statusMessages.length > maxMessages) {
starti = (statusMessages.length) - maxMessages;
}
for (var i = starti;i< statusMessages.length;i++) {
context.fillText (statusMessages[i], 350, starty );
starty+=12;
}
//chat box
context.strokeStyle = '#000000';
context.strokeRect(10, 10, 335, 285);
starti = 0;
lastMessage = chatMessages.length-1;
if (chatMessages.length > maxMessages) {
starti = (chatMessages.length) - maxMessages;
}
starty = 15;
for (var i = starti;i< chatMessages.length;i++) {
context.fillText (chatMessages[i], 10, starty );
starty+=12;
}
context.fillText ("User Name:" + username, 10, 295 );
update();
testWalls();
render();
}