Canvas JavaScript

Using ImageData to Draw a Circle

This JavaScript program demonstrates how to draw a circle using an image data instance to set individual pixels on a canvas element.

UseImageDataToDrawACircle.html

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

UseImageDataToDrawACircle.js

function Initialize() {
	var qCanvas = document.getElementById("idCanvas");
	var qContext = qCanvas.getContext("2d");
	var qImageData = qContext.createImageData(100, 100);
	// Change the actual pixel data. There are 4 channels per pixel rgba.
	// The array begins in the upper-left corner and pixels 
	for (var i = 0; i < qImageData.data.length; i += 4) {
		// The pixel (x, y) in the coordinate ranges [-50, 50] is at ((i % 400)/4 - 50, floor(i/400) - 50)
		var x = (i % 400)/4 - 50;
		var y = Math.floor(i/400) - 50;
		// The y-coordinate is upside-down, but it doesn't matter because I am drawing a circle
		if (x*x + y*y <= 2500) {
			qImageData.data[i] = 25;
			qImageData.data[i+1] = 50;
			qImageData.data[i+2] = 100;
			qImageData.data[i+3] = 64;
		}
	}
	// Use the image data to draw the circle several times.
	qContext.putImageData(qImageData, 100, 200);
	qContext.putImageData(qImageData, 300, 400);
	qContext.putImageData(qImageData, 400, 100);
}
 

Output

 
 

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