HTML and CSS Reference
In-Depth Information
//Box
context.strokeStyle = "#000000";
context.strokeRect(5, 5, 490, 290);
context.textBaseline = "top";
//Date
context.fillStyle = "#000000";
context.font = "10px _sans";
context.fillText (today, 150 ,10);
//Message
context.fillStyle = "#FF0000";
context.font = "14px _sans";
context.fillText (message, 125, 30);
//Guesses
context.fillStyle = "#109910";
context.font = "16px _sans";
context.fillText ('Guesses: ' + guesses, 215, 50);
//Higher Or Lower
context.fillStyle = "#000000";
context.font = "16px _sans";
context.fillText ("Higher Or Lower: " + higherOrLower, 150,125);
//Letters Guessed
context.fillStyle = "#FF0000";
context.font = "16px _sans";
context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText ("You Got It!", 150, 180);
}
}
function createImageDataPressed(e) {
window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width=" +
theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
<form>
<input type="button" id="createImageData" value="Export Canvas Image">
</form>
</div>
</body>
</html>
