Canvas JavaScript

Drawing Text

This JavaScript program demonstrates how to draw text on a canvas element.

DrawText.html

<!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>

DrawText.js

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

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.