reply View all Tutorials & Projects

How to Generate Your Own Wallpapers with JavaScript

In this video we'll take a look at how we can use the HTML5 canvas to generate wallpapers using JavaScript. This is easy to do using the Canvas API, linear and radial gradients.

Video Tutorial

Source Code

You can find the source code for this video below.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Wallpaper Generator</title>
	<script src="main.js" defer></script>
	<style>
		.wallpaper {
			border: 5px solid #000000;
			width: 500px;
		}

		.controls td {
			padding: 5px;
		}
	</style>
</head>
<body>
	<table class="controls">
		<tr>
			<td>Width:</td>
			<td><input type="number" class="input-width" value="1920"> px</td>
		</tr>
		<tr>
			<td>Height:</td>
			<td><input type="number" class="input-height" value="1080"> px</td>
		</tr>
		<tr>
			<td>Linear Start Color:</td>
			<td><input type="color" class="input-linear-start-color" value="#00b3ff"></td>
		</tr>
		<tr>
			<td>Linear End Color:</td>
			<td><input type="color" class="input-linear-end-color" value="#004a8f"></td>
		</tr>
		<tr>
			<td>Radial Color:</td>
			<td><input type="color" class="input-radial-color" value="#8c00ff"></td>
		</tr>
		<tr>
			<td><button type="button" class="btn-generate-wallpaper">Generate Wallpaper</button></td>
		</tr>
	</table>
	<canvas class="wallpaper" width="1920" height="1080"></canvas>
</body>
</html>
main.js
const wallpaper = document.querySelector(".wallpaper");
const inputWidth = document.querySelector(".input-width");
const inputHeight = document.querySelector(".input-height");
const inputLinearStartColor = document.querySelector(".input-linear-start-color");
const inputLinearEndColor = document.querySelector(".input-linear-end-color");
const inputRadialColor = document.querySelector(".input-radial-color");
const btnGenerateWallpaper = document.querySelector(".btn-generate-wallpaper");

btnGenerateWallpaper.addEventListener("click", renderWallpaperFromInput);
renderWallpaperFromInput();

function renderWallpaperFromInput() {
	wallpaper.width = inputWidth.value;
	wallpaper.height = inputHeight.value;

	renderWallpaper(
		wallpaper,
		inputLinearStartColor.value,
		inputLinearEndColor.value,
		inputRadialColor.value
	);
}

/**
 * @param {HTMLCanvasElement} canvasElement
 * @param {string} linearStartColor
 * @param {string} linearEndColor
 * @param {string} radialColor
 */
function renderWallpaper(canvasElement, linearStartColor, linearEndColor, radialColor) {
	const ctx = canvasElement.getContext("2d");
	const width = canvasElement.width;
	const height = canvasElement.height;
	const linearGradient = buildLinearGradient(ctx, width, height);
	const radialGradient = buildRadialGradient(ctx, width, height);

	linearGradient.addColorStop(0, linearStartColor);
	linearGradient.addColorStop(1, linearEndColor);

	radialGradient.addColorStop(0, radialColor);
	radialGradient.addColorStop(1, "transparent");

	ctx.fillStyle = linearGradient;
	ctx.fillRect(0, 0, width, height);

	ctx.fillStyle = radialGradient;
	ctx.fillRect(0, 0, width, height);
}

/**
 * @param {CanvasRenderingContext2D} ctx
 * @param {number} width
 * @param {number} height
 */
function buildLinearGradient(ctx, width, height) {
	return ctx.createLinearGradient(0, 0, width, height);
}

/**
 * @param {CanvasRenderingContext2D} ctx
 * @param {number} width
 * @param {number} height
 */
function buildRadialGradient(ctx, width, height) {
	const x = getRandomNumber(width * 0.75, width);
	const y = getRandomNumber(height * 0.25, height * 0.75);
	const size = width / 2;

	return ctx.createRadialGradient(x, y, 0, x, y, size);
}

function getRandomNumber(min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
}

If you have any questions about this code, please leave a comment on the video.