You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, mufasaOpacity = '0.65', titleText = 'THE HAMSTER KING', overlayColor = 'rgba(255, 120, 0, 0.4)') {
const canvas = document.createElement('canvas');
const w = originalImg.width;
const h = originalImg.height;
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
// 1. Draw the underlying original image
ctx.drawImage(originalImg, 0, 0, w, h);
// 2. Apply a Savannah Sunset overlay tint
ctx.fillStyle = overlayColor;
ctx.fillRect(0, 0, w, h);
// Helper: Draw stylized hamster (Hamtaro style)
function drawHamster(cx, cy, scaleSize, mainColor, accessory, isBoss = false) {
ctx.save();
ctx.translate(cx, cy);
ctx.scale(scaleSize, scaleSize);
if (isBoss) {
ctx.scale(1.15, 1); // Boss is a bit wider/beefier
}
// Mufasa Mane (for Boss)
if (accessory === 'mane') {
const drawManeLayer = (radiusBase, spikeVariation, color, offset) => {
ctx.fillStyle = color;
ctx.beginPath();
for (let i = 0; i <= Math.PI * 2 + 0.1; i += 0.1) {
let r = radiusBase + Math.sin(i * 12 + offset) * spikeVariation + Math.cos(i * 7) * (spikeVariation * 0.5);
if (i === 0) ctx.moveTo(Math.cos(i) * r, Math.sin(i) * r);
else ctx.lineTo(Math.cos(i) * r, Math.sin(i) * r);
}
ctx.closePath();
ctx.fill();
};
drawManeLayer(80, 20, '#5C1A06', 0); // Outer dark red/brown
drawManeLayer(65, 15, '#8B2500', 1.5); // Inner lighter mane
}
// Ears
ctx.fillStyle = mainColor;
ctx.beginPath(); ctx.arc(-35, -40, 18, 0, Math.PI * 2); ctx.fill();
ctx.beginPath(); ctx.arc(35, -40, 18, 0, Math.PI * 2); ctx.fill();
ctx.fillStyle = '#FFB6C1'; // Pink inner ear
ctx.beginPath(); ctx.arc(-35, -40, 9, 0, Math.PI * 2); ctx.fill();
ctx.beginPath(); ctx.arc(35, -40, 9, 0, Math.PI * 2); ctx.fill();
// Main Body/Head Blob
ctx.fillStyle = mainColor;
ctx.beginPath();
ctx.moveTo(0, -50);
ctx.bezierCurveTo(50, -50, 65, 20, 50, 65);
ctx.bezierCurveTo(40, 80, -40, 80, -50, 65);
ctx.bezierCurveTo(-65, 20, -50, -50, 0, -50);
ctx.fill();
// White Face & Belly Markings (classic hamster pattern)
if (mainColor !== '#FFFFFF') {
ctx.fillStyle = '#FFFFFF';
ctx.beginPath();
ctx.arc(-15, 12, 20, 0, Math.PI * 2); // left cheek
ctx.arc(15, 12, 20, 0, Math.PI * 2); // right cheek
ctx.arc(0, 42, 30, 0, Math.PI * 2); // belly
ctx.fill();
} else {
// Give pure white hamsters (Bijou) a soft grey inner outline for depth
ctx.strokeStyle = 'rgba(0,0,0,0.05)';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc(-15, 12, 18, 0, Math.PI * 2);
ctx.arc(15, 12, 18, 0, Math.PI * 2);
ctx.arc(0, 42, 28, 0, Math.PI * 2);
ctx.stroke();
}
// Blue Ribbons (for Bijou)
if (accessory === 'ribbons') {
const drawBow = (bx, by) => {
ctx.fillStyle = '#1E90FF'; // Dodger blue
ctx.beginPath(); ctx.moveTo(bx, by); ctx.lineTo(bx - 18, by - 14); ctx.lineTo(bx - 18, by + 14); ctx.fill();
ctx.beginPath(); ctx.moveTo(bx, by); ctx.lineTo(bx + 18, by - 14); ctx.lineTo(bx + 18, by + 14); ctx.fill();
ctx.beginPath(); ctx.arc(bx, by, 5, 0, Math.PI * 2); ctx.fill();
};
drawBow(-35, -45); // Left
drawBow(35, -45); // Right
}
// Eyes
ctx.fillStyle = '#000000';
ctx.beginPath(); ctx.arc(-17, -10, 6, 0, Math.PI * 2); ctx.fill();
ctx.beginPath(); ctx.arc(17, -10, 6, 0, Math.PI * 2); ctx.fill();
ctx.fillStyle = '#FFFFFF'; // Eye sparkle
ctx.beginPath(); ctx.arc(-18, -12, 2, 0, Math.PI * 2); ctx.fill();
ctx.beginPath(); ctx.arc(16, -12, 2, 0, Math.PI * 2); ctx.fill();
// Snout / Nose
ctx.fillStyle = '#FF69B4'; // Hot pink
ctx.beginPath(); ctx.arc(0, 4, 3.5, 0, Math.PI * 2); ctx.fill();
// Mouth ('w' shape)
ctx.strokeStyle = '#222';
ctx.lineWidth = 1.5;
ctx.beginPath(); ctx.arc(-6, 9.5, 6, 0.1, Math.PI * 0.9, false); ctx.stroke();
ctx.beginPath(); ctx.arc(6, 9.5, 6, 0.1, Math.PI * 0.9, false); ctx.stroke();
// Whiskers
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.lineWidth = 1;
ctx.beginPath(); ctx.moveTo(-25, 4); ctx.lineTo(-45, -2); ctx.stroke();
ctx.beginPath(); ctx.moveTo(-28, 10); ctx.lineTo(-48, 8); ctx.stroke();
ctx.beginPath(); ctx.moveTo(25, 4); ctx.lineTo(45, -2); ctx.stroke();
ctx.beginPath(); ctx.moveTo(28, 10); ctx.lineTo(48, 8); ctx.stroke();
ctx.restore();
}
const minDim = Math.min(w, h);
// 3. Draw Mufasa (Boss) in the sky with ethereal glow
ctx.save();
ctx.globalAlpha = parseFloat(mufasaOpacity);
ctx.shadowColor = '#FFD700';
ctx.shadowBlur = 60;
// Boss as Mufasa (Brown + Red/Brown Mane)
drawHamster(w * 0.75, h * 0.35, minDim / 250, '#5C4033', 'mane', true);
ctx.restore();
// 4. Draw Silhouette of Pride Rock
ctx.fillStyle = '#111111';
ctx.beginPath();
ctx.moveTo(0, h);
ctx.lineTo(w * 0.65, h); // Base width
ctx.lineTo(w * 0.45, h * 0.7); // Tip of the rock
ctx.lineTo(0, h * 0.55); // Back edge
ctx.closePath();
ctx.fill();
// 5. Draw Simba (Hamtaro) and Nala (Bijou) on the rock
// Hamtaro as Young Simba (Orange)
drawHamster(w * 0.28, h * 0.73, minDim / 380, '#FF8C00', 'none', false);
// Bijou as Young Nala (White + Ribbons)
drawHamster(w * 0.42, h * 0.76, minDim / 420, '#FFFFFF', 'ribbons', false);
// 6. Add gradient shading for dramatic floor & title effect
const textGrad = ctx.createLinearGradient(0, h * 0.8, 0, h);
textGrad.addColorStop(0, 'rgba(0,0,0,0)');
textGrad.addColorStop(1, 'rgba(0,0,0,0.8)');
ctx.fillStyle = textGrad;
ctx.fillRect(0, 0, w, h);
// 7. Write the classic cinematic text
ctx.font = `bold ${minDim * 0.08}px Impact, sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.lineJoin = 'round';
// Text Stroke (Red/Brown outline)
ctx.strokeStyle = '#8B0000';
ctx.lineWidth = minDim * 0.015;
ctx.strokeText(titleText, w / 2, h * 0.95);
// Text Fill (Gold)
ctx.fillStyle = '#FFD700';
ctx.fillText(titleText, w / 2, h * 0.95);
return canvas;
}Apply Changes
