You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, overlayPosition = "bottom-right", scaleFactor = 0.5, customText = "Нестрашное пугало!") {
// Basic canvas setup
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// Draw the background image
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
// Calculate sizing based on shortest dimension
// to ensure the scarecrow scales properly relative to the image
const minDim = Math.min(canvas.width, canvas.height);
const scarecrowSize = minDim * Math.max(0.1, Math.min(Number(scaleFactor), 2.0));
// Determine positioning coordinates
let cx = canvas.width / 2;
let cy = canvas.height / 2;
const padding = scarecrowSize * 0.6;
switch (String(overlayPosition).toLowerCase().trim()) {
case "bottom-right":
cx = canvas.width - padding;
cy = canvas.height - padding;
break;
case "bottom-left":
cx = padding;
cy = canvas.height - padding;
break;
case "top-right":
cx = canvas.width - padding;
cy = padding;
break;
case "top-left":
cx = padding;
cy = padding;
break;
case "bottom":
cx = canvas.width / 2;
cy = canvas.height - padding;
break;
case "center":
default:
cx = canvas.width / 2;
cy = canvas.height / 2;
break;
}
// --- Start Drawing the "Not Scary Scarecrow" (Нестрашное пугало) ---
ctx.save();
ctx.translate(cx, cy);
// The base internal coordinate system is roughly -100 to 100 for a height of 200
const scale = scarecrowSize / 200;
ctx.scale(scale, scale);
// 1. Draw Background Pole (Cross)
ctx.fillStyle = '#6b4423';
ctx.fillRect(-8, -30, 16, 140); // Vertical post
ctx.fillRect(-70, 30, 140, 12); // Horizontal post
// 2. Draw Straws (Arms and Hair)
ctx.strokeStyle = '#f1c40f'; // Bright sunny yellow
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.beginPath();
// Left hand straw
for(let i = 0; i < 7; i++) {
ctx.moveTo(-65, 36);
ctx.lineTo(-85 + Math.random() * 10, 25 + Math.random() * 25);
}
// Right hand straw
for(let i = 0; i < 7; i++) {
ctx.moveTo(65, 36);
ctx.lineTo(85 - Math.random() * 10, 25 + Math.random() * 25);
}
// Messy Hair
for(let i = 0; i < 20; i++) {
ctx.moveTo(0, -30);
ctx.lineTo(-55 + Math.random() * 110, -60 + Math.random() * 30);
}
ctx.stroke();
// 3. Draw Plaid Shirt
ctx.shadowColor = 'rgba(0,0,0,0.3)';
ctx.shadowBlur = 5;
ctx.fillStyle = '#e74c3c'; // Cheerful red
// Define the shirt path for clipping and filling
const shirtPath = new Path2D();
shirtPath.moveTo(-45, 27);
shirtPath.lineTo(45, 27);
shirtPath.lineTo(55, 95);
shirtPath.lineTo(-55, 95);
shirtPath.closePath();
ctx.fill(shirtPath);
ctx.shadowBlur = 0; // Turn off shadow so plaid pattern doesn't blur
// Clip the plaid pattern to the shirt
ctx.save();
ctx.clip(shirtPath);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
ctx.lineWidth = 4;
ctx.beginPath();
// Vertical lines
for(let x = -50; x <= 50; x += 12) {
ctx.moveTo(x, 20);
ctx.lineTo(x + (x > 0 ? 10 : -10), 100);
}
// Horizontal lines
for(let y = 35; y <= 100; y += 12) {
ctx.moveTo(-60, y);
ctx.lineTo(60, y + Math.sin(y)*2);
}
ctx.stroke();
ctx.restore(); // Undo clipping
// 4. Overalls/Straps
ctx.fillStyle = '#2980b9'; // Blue denim
ctx.fillRect(-35, 27, 12, 60); // Left strap
ctx.fillRect(23, 27, 12, 60); // Right strap
ctx.fillRect(-50, 75, 100, 20); // Bottom denim
// Denim Buttons (Gold)
ctx.fillStyle = '#f1c40f';
ctx.beginPath(); ctx.arc(-29, 85, 5, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(29, 85, 5, 0, Math.PI*2); ctx.fill();
// 5. Draw Cute Head
ctx.fillStyle = '#eaddca'; // Burlap sack color
ctx.shadowColor = 'rgba(0,0,0,0.2)';
ctx.shadowBlur = 8;
ctx.beginPath();
ctx.arc(0, -15, 38, 0, Math.PI*2);
ctx.fill();
ctx.shadowBlur = 0;
// Rosy Cheeks
ctx.fillStyle = 'rgba(255, 118, 117, 0.6)';
ctx.beginPath(); ctx.arc(-22, -2, 10, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(22, -2, 10, 0, Math.PI*2); ctx.fill();
// Button Eyes (Not scary)
ctx.fillStyle = '#2d3436';
ctx.beginPath(); ctx.arc(-16, -20, 6, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(16, -20, 6, 0, Math.PI*2); ctx.fill();
// Gleam in eyes for extra cuteness
ctx.fillStyle = 'white';
ctx.beginPath(); ctx.arc(-17, -22, 2, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(15, -22, 2, 0, Math.PI*2); ctx.fill();
// Cute stitched nose (orange triangle patch)
ctx.fillStyle = '#d35400';
ctx.beginPath();
ctx.moveTo(0, -16);
ctx.lineTo(-6, -4);
ctx.lineTo(6, -4);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#2d3436';
ctx.stroke();
// Friendly Smiling Mouth (with cute cross-stitches)
ctx.strokeStyle = '#2d3436';
ctx.lineWidth = 2.5;
ctx.beginPath();
ctx.arc(0, -2, 18, 0.2, Math.PI - 0.2); // Nice wide smile
ctx.stroke();
// Stitches along the smile
ctx.lineWidth = 1.5;
ctx.beginPath();
for (let angle = 0.4; angle < 3; angle += 0.5) {
let sx = Math.cos(angle) * 18;
let sy = Math.sin(angle) * 18 - 2;
ctx.moveTo(sx - 3, sy - 3);
ctx.lineTo(sx + 3, sy + 3);
ctx.moveTo(sx + 3, sy - 3);
ctx.lineTo(sx - 3, sy + 3);
}
ctx.stroke();
// 6. A Cute Sunflower in hand
ctx.save();
ctx.translate(65, 10);
// Stem
ctx.strokeStyle = '#27ae60';
ctx.lineWidth = 4;
ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(-15, 20, -5, 50); ctx.stroke();
// Petals
ctx.fillStyle = '#f1c40f';
for(let a = 0; a < Math.PI * 2; a += Math.PI / 4) {
ctx.beginPath();
ctx.ellipse(Math.cos(a) * 12, Math.sin(a) * 12, 10, 4, a, 0, Math.PI * 2);
ctx.fill();
}
// Sunflower Center
ctx.fillStyle = '#5c4033';
ctx.beginPath(); ctx.arc(0, 0, 8, 0, Math.PI*2); ctx.fill();
ctx.restore();
// 7. Wizard-like / Floppy Scarecrow Hat
ctx.fillStyle = '#8e44ad'; // Playful purple
// Hat brim
ctx.beginPath();
ctx.ellipse(0, -45, 52, 12, 0, 0, Math.PI*2);
ctx.fill();
// Hat cone (bent slightly)
ctx.beginPath();
ctx.moveTo(-30, -45);
ctx.quadraticCurveTo(-15, -95, 30, -100);
ctx.quadraticCurveTo(20, -70, 30, -45);
ctx.fill();
// Bright Hat Ribbon
ctx.fillStyle = '#1abc9c'; // Teal
ctx.beginPath();
ctx.moveTo(-28, -50);
ctx.quadraticCurveTo(0, -40, 28, -50);
ctx.lineTo(26, -45);
ctx.quadraticCurveTo(0, -35, -26, -45);
ctx.fill();
// 8. Cute Little Crow perched on the hat
ctx.save();
ctx.translate(15, -90);
ctx.fillStyle = '#34495e';
// Bird Body
ctx.beginPath(); ctx.arc(0, 0, 10, 0, Math.PI*2); ctx.fill();
// Bird Tail
ctx.beginPath(); ctx.moveTo(-5, 5); ctx.lineTo(-18, 12); ctx.lineTo(-10, -2); ctx.fill();
// Yellow Beak
ctx.fillStyle = '#f1c40f';
ctx.beginPath(); ctx.moveTo(8, -2); ctx.lineTo(16, 0); ctx.lineTo(8, 2); ctx.fill();
// Big White Eye
ctx.fillStyle = '#ffffff';
ctx.beginPath(); ctx.arc(4, -3, 3.5, 0, Math.PI*2); ctx.fill();
// Pupil
ctx.fillStyle = '#000000';
ctx.beginPath(); ctx.arc(5, -3, 1.5, 0, Math.PI*2); ctx.fill();
ctx.restore();
// End drawing scarecrow transformations
ctx.restore();
// Draw stylish "Нестрашное пугало!" text at the bottom if provided
if (customText.trim() !== "") {
const textHeight = Math.max(20, minDim * 0.05);
ctx.fillStyle = "rgba(255, 255, 255, 0.75)";
ctx.fillRect(0, canvas.height - textHeight * 2, canvas.width, textHeight * 2);
ctx.font = `bold ${textHeight}px 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif`;
ctx.fillStyle = "#2c3e50";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.shadowColor = "white";
ctx.shadowBlur = 4;
ctx.fillText(customText, canvas.width / 2, canvas.height - textHeight);
ctx.shadowBlur = 0; // Reset
}
return canvas;
}Apply Changes
