Canvas JavaScript

Generate Random Points

This JavaScript program demonstrates how to generate random points on a canvas element.

GenerateRandomPoints.html

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

GenerateRandomPoints.js

var gqCanvas = null;
var gqContext = null;
var gqPoints = null;

class Point2D {
	constructor(dX, dY) {
		this.mdX = dX;
		this.mdY = dY;
	}
	
	DrawPoint(qContext2D) {
		qContext2D.fillStyle = "gray";
		qContext2D.beginPath();
		qContext2D.arc(this.mdX, this.mdY, 3, 0, 2.0*Math.PI, true);
		qContext2D.fill();
	}
}


function Initialize() {
	gqCanvas = document.getElementById("idCanvas");
	gqContext = gqCanvas.getContext("2d");
	gqPoints = [];
	// Get the size of the canvas
	const kiWidth = gqCanvas.width;
	const kiHeight = gqCanvas.height;
	// Generate the set of points
	for (var i = 0; i < 100; ++i) {
		gqPoints.push(new Point2D(20 + (kiWidth - 40)*Math.random(),20 + (kiHeight - 40)*Math.random()));
	}
}

function Draw() {
	Initialize();
	
	for(var qPoint of gqPoints) {
		qPoint.DrawPoint(gqContext);
	}
}
 

Output

 
 

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