Canvas JavaScript

Draw a Rectangle

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

DrawARectangle.html

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

DrawARectangle.js

function Draw() {
	var qCanvas = document.getElementById("idCanvas");
	var qContext2D = qCanvas.getContext("2d");
	var dLeft = 50.0;
	var dTop = 100;
	var dWidth = 200.0;
	var dHeight = 150.0;
    qContext2D.fillStyle = '#F8F8FF';
    qContext2D.strokeStyle = 'lightblue';
	qContext2D.beginPath();
    qContext2D.fillRect(dLeft, dTop, dWidth, dHeight);
    qContext2D.strokeRect(dLeft + 50.0, dTop + 25.0, dWidth, dHeight);
}
 

Output

 
 

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