Draw a Line

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

DrawALine.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="DrawALine.js"></script>
  </head>
  <body onload="Draw()">
    <canvas id="idCanvas" width="640" height ="480" style="background-color: #F0F0F0;"></canvas>
  </body>
</html>

DrawALine.js

function Draw() {
	var qCanvas = document.getElementById("idCanvas");
	var qContext2D = qCanvas.getContext("2d");

	var dX1 = 100.0;
	var dY1 = 200.0;
	var dX2 = 400.0;
	var dY2 = 300.0;

    qContext2D.strokeStyle = "lightblue";
	qContext2D.lineWidth = "3";
	qContext2D.beginPath();
	qContext2D.moveTo(dX1, dY1);
	qContext2D.lineTo(dX2, dY2);
	qContext2D.stroke();

	qContext2D.strokeStyle = "black";
	qContext2D.lineWidth = ".5";
	qContext2D.beginPath();
	qContext2D.moveTo(dX1, dY2);
	qContext2D.lineTo(dX2, dY1);
	qContext2D.stroke();
}

Canvas JavaScript

Draw a Line

DrawALine.html

DrawALine.js

Output