This JavaScript program demonstrates how to draw text on a canvas element.
<!DOCTYPE html> <html> <head> <title>XoaX.net's Javascript</title> <script type="text/javascript" src="DrawText.js"></script> </head> <body onload="Draw()"> <canvas id="idCanvas" width="640" height ="480" style="background-color: #F0F0F0;"></canvas> </body> </html>
function Draw() {
var qCanvas = document.getElementById("idCanvas");
var qContext2D = qCanvas.getContext("2d");
var dLeftX = 200.0;
var dTopY = 250.0;
// This can be used to potentially compress text or omitted to leave it.
var dMaxWidth = 100.0;
qContext2D.font = "60px Times";
qContext2D.strokeStyle = "red";
qContext2D.strokeText("XoaX.net", dLeftX, dTopY);
qContext2D.font = "60px Times";
qContext2D.strokeStyle = "red";
qContext2D.strokeText("XoaX.net", dLeftX, dTopY + 50, dMaxWidth);
}
© 20072025 XoaX.net LLC. All rights reserved.