Create a Synthetic Image

This JavaScript program demonstrates how to create a synthetic image from an array buffer and how to composite it onto a canvas.

SyntheticImage.html

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

SyntheticImage.js

async function Initialize() {
	const qCanvas = document.getElementById("idCanvas");
	const qContext2D = qCanvas.getContext("2d");
	const ui8Array = new Uint8ClampedArray(400*400*4);
	
	for (let i = 0; i < ui8Array.length; i += 4) {
		let iPixel = i / 4;
		let iX = iPixel % 400;
		let iY = (iPixel - iX)/400;
		if (iX == iY) {
			ui8Array[i] = 255;
		} else {
			ui8Array[i] = 64;
		}
		ui8Array[i + 1] = 0;
		ui8Array[i + 2] = 0;
		ui8Array[i + 3] = 128;
	}
	
	let qImageData = new ImageData(ui8Array, 400, 400);
	let qBitmap = await createImageBitmap(qImageData);
	
	qContext2D.drawImage(qBitmap, 20, 20);
	qContext2D.drawImage(qBitmap, 20, 220);
	qContext2D.drawImage(qBitmap, 220, 20);
	qContext2D.drawImage(qBitmap, 220, 220);
}

Canvas JavaScript

Create a Synthetic Image

SyntheticImage.html

SyntheticImage.js

Output