You can edit the below JavaScript code to customize the image tool.
async function processImage(
originalImg,
lastName = "SAMPLE",
firstName = "JANE",
address = "123 ANY STREET, WACO, TX 76701",
dob = "01/01/1990",
dlNumber = "12345678",
issueDate = "08/24/2021",
expiresDate = "08/24/2029",
height = "5-05",
eyes = "BRO",
sex = "F",
signatureText = "Jane Sample"
) {
// Dynamically load a cursive font for the signature
const font = new FontFace('Sacramento', 'url(https://fonts.gstatic.com/s/sacramento/v13/buEzpo6gcdjy0EiZMBUG4C0f-w.woff2)');
await font.load();
document.fonts.add(font);
const W = 856;
const H = 540;
const canvas = document.createElement('canvas');
canvas.width = W;
canvas.height = H;
const ctx = canvas.getContext('2d');
// -- Helper Functions --
const drawStar = (cx, cy, spikes, outerRadius, innerRadius, color) => {
let rot = Math.PI / 2 * 3;
let x = cx;
let y = cy;
let step = Math.PI / spikes;
ctx.beginPath();
ctx.moveTo(cx, cy - outerRadius);
for (let i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
ctx.lineTo(x, y);
rot += step;
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
ctx.lineTo(x, y);
rot += step;
}
ctx.lineTo(cx, cy - outerRadius);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
};
// -- Background and Template --
// Main background
ctx.fillStyle = '#E8F2F8';
ctx.fillRect(0, 0, W, H);
// Faint Texas outline in the background
// Path data for the state of Texas
const texasPathData = "M 503.6,367.4 L 509.7,358.4 L 522.3,358.4 L 522.3,354.4 L 515.2,354.4 L 515.2,351.4 L 518.2,351.4 L 518.2,347.3 L 507.2,347.3 L 504.1,343.3 L 504.1,335.3 L 512.2,335.3 L 520.3,332.3 L 520.3,322.3 L 535.4,322.3 L 533.4,306.2 L 542.4,300.2 L 542.4,289.2 L 534.4,289.2 L 530.4,272.1 L 535.4,268.1 L 535.4,256.1 L 546.5,256.1 L 546.5,249.1 L 560.6,249.1 L 563.6,238.0 L 581.7,238.0 L 581.7,235.0 L 585.7,235.0 L 585.7,219.0 L 573.7,219.0 L 569.6,209.9 L 584.7,209.9 L 583.7,197.9 L 602.8,175.8 L 601.8,168.8 L 591.8,153.7 L 595.8,143.7 L 591.8,137.7 L 591.8,103.6 L 575.7,103.6 L 569.6,90.5 L 569.6,73.5 L 553.6,56.4 L 549.5,43.3 L 535.5,32.3 L 527.4,29.3 L 522.4,37.3 L 510.3,37.3 L 497.3,55.4 L 488.2,55.4 L 488.2,63.4 L 467.1,63.4 L 467.1,38.3 L 449.1,38.3 L 449.1,23.3 L 420.0,23.3 L 420.0,43.3 L 396.9,43.3 L 392.9,59.4 L 392.9,80.5 L 379.8,98.5 L 369.8,98.5 L 369.8,124.6 L 361.8,124.6 L 342.7,143.7 L 342.7,157.7 L 333.7,173.8 L 333.7,192.9 L 319.6,210.9 L 310.6,210.9 L 310.6,227.0 L 297.5,246.1 L 297.5,280.1 L 305.6,293.2 L 305.6,310.2 L 294.5,317.3 L 300.6,346.3 L 300.6,367.4 L 312.6,367.4 L 324.7,372.4 L 360.8,372.4 L 367.8,382.5 L 367.8,409.5 L 375.8,421.6 L 389.9,421.6 L 401.9,439.6 L 408.0,439.6 L 413.0,444.7 L 413.0,463.7 L 421.0,463.7 L 433.1,475.7 L 433.1,489.8 L 447.1,489.8 L 447.1,481.8 L 464.2,463.7 L 464.2,442.7 L 478.2,429.6 L 485.3,429.6 L 496.3,412.5 L 496.3,382.5 L 503.6,367.4";
ctx.save();
ctx.globalAlpha = 0.08;
ctx.fillStyle = '#00528c'; // Dark Blue
ctx.translate(150, 0); // Position it
ctx.scale(1.1, 1.1); // Scale it
const path = new Path2D(texasPathData);
ctx.fill(path);
ctx.restore();
// -- Header --
ctx.fillStyle = '#00528c'; // Texas Blue
ctx.font = 'bold 60px Arial';
ctx.textAlign = 'center';
ctx.fillText('TEXAS', W / 2 + 70, 75);
ctx.fillStyle = '#BF0A30'; // Texas Red
ctx.fillRect(280, 88, W - 290, 8);
ctx.fillStyle = 'black';
ctx.font = '24px Arial';
ctx.fillText('DRIVER LICENSE', W / 2 + 70, 120);
// -- Photo Area --
ctx.strokeStyle = '#a0a0a0';
ctx.lineWidth = 1;
ctx.strokeRect(30, 120, 220, 260);
ctx.drawImage(originalImg, 30, 120, 220, 260);
// Star seal
drawStar(60, 150, 5, 20, 10, '#fcd116'); // Yellow star
// -- Ghost Photo --
ctx.save();
ctx.globalAlpha = 0.2;
ctx.drawImage(originalImg, 290, 280, 150, 180);
ctx.restore();
// -- Top Information Bar --
const printLabelAndData = (label, data, x, y) => {
ctx.fillStyle = '#BF0A30'; // Red for labels
ctx.font = 'bold 16px Arial';
ctx.textAlign = 'left';
ctx.fillText(label, x, y);
ctx.fillStyle = 'black';
ctx.font = 'bold 18px Arial';
ctx.fillText(data, x + 50, y);
};
printLabelAndData('DL', dlNumber, 280, 160);
printLabelAndData('EXP', expiresDate, 550, 160);
printLabelAndData('CL', "C", 280, 190);
printLabelAndData('END', "NONE", 410, 190);
printLabelAndData('REST', "A", 550, 190);
// Thin separator line
ctx.fillStyle = '#a0a0a0';
ctx.fillRect(280, 210, W - 310, 1);
// -- Main Personal Info --
const printMainInfo = (label, data, x, y) => {
ctx.fillStyle = '#BF0A30';
ctx.font = '14px Arial';
ctx.textAlign = 'left';
ctx.fillText(label, x, y);
ctx.fillStyle = 'black';
ctx.font = 'bold 20px Arial';
ctx.fillText(data.toUpperCase(), x, y + 22);
};
printMainInfo('LN', lastName, 280, 240);
printMainInfo('FN', firstName, 550, 240);
printMainInfo('ADDRESS', address, 280, 290);
// -- Signature --
ctx.font = '40px Sacramento';
ctx.fillStyle = '#000080'; // Dark blue signature
ctx.fillText(signatureText, 450, 390);
// -- Bottom Information Columns --
const printBottomInfo = (label, data, x) => {
const y = 470;
ctx.fillStyle = '#BF0A30';
ctx.font = 'bold 14px Arial';
ctx.textAlign = 'left';
ctx.fillText(label, x, y);
ctx.fillStyle = 'black';
ctx.font = 'bold 16px Arial';
ctx.fillText(data, x, y + 20);
};
printBottomInfo('DOB', dob, 30, 470);
printBottomInfo('HGT', height, 160, 470);
printBottomInfo('EYES', eyes, 260, 470);
printBottomInfo('SEX', sex, 360, 470);
// Placeholder under 21 text
const dobDate = new Date(dob);
const issueDateObj = new Date(issueDate);
const ageAtIssue = issueDateObj.getFullYear() - dobDate.getFullYear();
if(ageAtIssue < 21) {
ctx.fillStyle = '#BF0A30'; // Red text
ctx.font = 'bold 16px Arial';
ctx.fillText("UNDER 21 UNTIL " + new Date(dobDate.setFullYear(dobDate.getFullYear() + 21)).toLocaleDateString("en-US"), 460, 490);
}
// Bottom Bar
ctx.fillStyle = '#00528c';
ctx.fillRect(0, H - 25, W, 25);
ctx.fillStyle = 'white';
ctx.font = '12px Arial';
ctx.textAlign = 'left';
ctx.fillText(`ISSUED: ${issueDate}`, 10, H - 9);
ctx.fillText(`DD: ${(Math.random() * 100000000).toFixed(0)}${dlNumber}`, 200, H - 9);
ctx.textAlign = 'right';
ctx.fillText('SAMPLE - NOT A REAL DOCUMENT', W - 10, H-9);
return canvas;
}
Free Image Tool Creator
Can't find the image tool you're looking for? Create one based on your own needs now!
The Image Sample of Texas Waco Driver’s License tool allows users to create a customized graphic representation of a Texas driver’s license. By inputting personal information such as name, address, date of birth, and other details, users can generate a visual mockup of a driver’s license. This tool can be useful for educational purposes, design mockups, or practice identification creation in a controlled environment. It is not intended for actual identification purposes, but rather as a sample or template for demonstration and learning.
