You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, position = "bottom-right", scarecrowSizeRatio = "0.4", message = "Нестрашное пугало") {
// Create new canvas to draw the overlay
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Make canvas identical in size to original image
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// Draw the base image
ctx.drawImage(originalImg, 0, 0);
// Ensure scaling ratio is within a reasonable limit
let sizeRatio = parseFloat(scarecrowSizeRatio);
if (isNaN(sizeRatio) || sizeRatio <= 0) sizeRatio = 0.4;
sizeRatio = Math.min(1, Math.max(0.1, sizeRatio));
// Determine the size of the scarecrow drawing based on the image's dimensions
const minD = Math.max(canvas.width, canvas.height);
const sSize = minD * sizeRatio;
// Parse positioning
let x = 0, y = 0;
const offset = sSize / 2 + (minD * 0.05); // 5% padding
switch(position.toLowerCase()) {
case "center":
x = canvas.width / 2;
y = canvas.height / 2;
break;
case "top-left":
x = offset;
y = offset;
break;
case "top-right":
x = canvas.width - offset;
y = offset;
break;
case "bottom-left":
x = offset;
y = canvas.height - offset;
break;
case "bottom-right":
default:
x = canvas.width - offset;
y = canvas.height - offset;
break;
}
ctx.save();
// Move the origin to our determined x, y to draw around the center point
ctx.translate(x, y);
// Our scarecrow is originally drawn for a ~240px bounding box
const scale = sSize / 240;
ctx.scale(scale, scale);
// Global line settings for a friendlier cartoon appearance
ctx.lineCap = "round";
ctx.lineJoin = "round";
// 1. Straw hair (back layer) - Yellow glowing straws
ctx.fillStyle = '#F4D03F';
ctx.strokeStyle = '#D4AC0D';
ctx.lineWidth = 4;
for(let i = 0; i < 35; i++) {
let angle = Math.PI + (i / 34) * Math.PI;
let r1 = 50;
let r2 = 90 + Math.random() * 35;
ctx.beginPath();
let hx = Math.cos(angle) * r1;
let hy = Math.sin(angle) * r1 - 10;
let ex = Math.cos(angle) * r2 + (Math.random() - 0.5) * 20;
let ey = Math.sin(angle) * r2 - 10 + (Math.random() - 0.5) * 20;
ctx.moveTo(hx, hy);
ctx.lineTo(ex, ey);
ctx.stroke();
}
// 2. Head (Burlap sack shape)
ctx.fillStyle = '#E5C096';
ctx.strokeStyle = '#A07A50';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.ellipse(0, 10, 65, 75, 0, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
// 3. Side straws poking out
ctx.lineWidth = 2.5;
for (let side of [-1, 1]) {
for(let i = 0; i < 6; i++) {
ctx.beginPath();
let sx = side * 60;
let sy = i * 12 - 10;
ctx.moveTo(sx, sy);
ctx.lineTo(sx + side * (20 + Math.random() * 20), sy + (Math.random() - 0.5) * 15);
ctx.stroke();
}
}
// 4. Eyes (Cute stitched buttons)
function drawButton(bx, by) {
// Shadow/Thread base
ctx.fillStyle = '#333';
ctx.beginPath();
ctx.arc(bx, by, 14, 0, Math.PI * 2);
ctx.fill();
// Inner button rim
ctx.fillStyle = '#1A1A1A';
ctx.beginPath();
ctx.arc(bx, by, 10, 0, Math.PI * 2);
ctx.fill();
// Stitches
ctx.strokeStyle = '#EBEBEB';
ctx.lineWidth = 2.5;
ctx.beginPath();
ctx.moveTo(bx - 5, by - 5);
ctx.lineTo(bx + 5, by + 5);
ctx.moveTo(bx + 5, by - 5);
ctx.lineTo(bx - 5, by + 5);
ctx.stroke();
}
// Set slightly uneven eyes for clumsiness charm
drawButton(-25, -5);
drawButton(25, 0);
// 5. Cutesy Blushes
ctx.fillStyle = 'rgba(231, 76, 60, 0.4)';
ctx.beginPath();
ctx.arc(-40, 25, 12, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(42, 28, 12, 0, Math.PI * 2);
ctx.fill();
// 6. Nose (Carrot-like patch)
ctx.fillStyle = '#E67E22';
ctx.beginPath();
ctx.moveTo(-12, 17);
ctx.lineTo(12, 17);
ctx.lineTo(0, 42);
ctx.closePath();
ctx.fill();
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();
// Nose stitches
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(-6, 14); ctx.lineTo(-6, 20);
ctx.moveTo(6, 14); ctx.lineTo(6, 20);
ctx.moveTo(-8, 27); ctx.lineTo(-2, 30);
ctx.moveTo(8, 27); ctx.lineTo(2, 30);
ctx.stroke();
// 7. Smile (Big and friendly)
ctx.strokeStyle = '#333';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc(0, 25, 45, 0.2 * Math.PI, 0.8 * Math.PI);
ctx.stroke();
// Smile Stitches
ctx.lineWidth = 2.5;
for (let angle = 0.25 * Math.PI; angle <= 0.75 * Math.PI; angle += 0.12) {
let cx = Math.cos(angle) * 45;
let cy = Math.sin(angle) * 45 + 25;
let dx = Math.cos(angle) * 6;
let dy = Math.sin(angle) * 6;
ctx.beginPath();
ctx.moveTo(cx - dx, cy - dy);
ctx.lineTo(cx + dx, cy + cy * 0.05); // Minor jitter for handmade look
ctx.stroke();
}
// 8. Hat (Colorful & Oversized)
// Hat Brim
ctx.fillStyle = '#D35400';
ctx.beginPath();
ctx.ellipse(0, -45, 85, 25, -0.05, 0, Math.PI * 2); // slight tilt
ctx.fill();
ctx.strokeStyle = '#873600';
ctx.lineWidth = 4;
ctx.stroke();
// Hat Top
ctx.beginPath();
ctx.moveTo(-50, -50);
ctx.quadraticCurveTo(-60, -90, -30, -120);
ctx.lineTo(10, -110);
ctx.quadraticCurveTo(40, -100, 50, -50);
ctx.fill();
ctx.stroke();
// Hat Ribbon
ctx.fillStyle = '#27AE60';
ctx.beginPath();
ctx.ellipse(0, -55, 52, 12, -0.05, 0, Math.PI * 2);
ctx.fill();
// Hat Patch for aesthetic
ctx.fillStyle = '#F1C40F';
ctx.beginPath();
ctx.rect(10, -90, 25, 25);
ctx.fill();
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();
// Patch Stitches
ctx.beginPath();
ctx.moveTo(10, -85); ctx.lineTo(15, -85);
ctx.moveTo(10, -75); ctx.lineTo(15, -75);
ctx.moveTo(35, -85); ctx.lineTo(30, -85);
ctx.moveTo(35, -75); ctx.lineTo(30, -75);
ctx.stroke();
// 9. Welcoming Speech Bubble
if (message && message.trim() !== "") {
ctx.font = "bold 24px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
const padding = 15;
const textMetrics = ctx.measureText(message);
const textWidth = textMetrics.width;
const textHeight = 24;
const bx = 0;
const by = -160;
const rx = bx - textWidth / 2 - padding;
const ry = by - textHeight / 2 - padding;
const rw = textWidth + padding * 2;
const rh = textHeight + padding * 2;
const r = 15; // corner radius
ctx.fillStyle = "rgba(255, 255, 255, 0.95)";
ctx.strokeStyle = "#333";
ctx.lineWidth = 3;
// Draw bubble and tail as a single path
ctx.beginPath();
ctx.moveTo(rx + r, ry);
ctx.lineTo(rx + rw - r, ry);
ctx.quadraticCurveTo(rx + rw, ry, rx + rw, ry + r);
ctx.lineTo(rx + rw, ry + rh - r);
ctx.quadraticCurveTo(rx + rw, ry + rh, rx + rw - r, ry + rh);
// Connect tail pointing towards the scarecrow top hat
ctx.lineTo(bx + 10, ry + rh);
ctx.lineTo(bx - 10, ry + rh + 18);
ctx.lineTo(bx - 5, ry + rh);
ctx.lineTo(rx + r, ry + rh);
ctx.quadraticCurveTo(rx, ry + rh, rx, ry + rh - r);
ctx.lineTo(rx, ry + r);
ctx.quadraticCurveTo(rx, ry, rx + r, ry);
ctx.fill();
ctx.stroke();
ctx.fillStyle = "#333";
ctx.fillText(message, bx, by);
}
ctx.restore();
return canvas;
}Apply Changes
