Image Grading And Assessment Tool

function processImage(originalImg, grade = "2", comment = "Опять двойка!", color = "rgba(219, 15, 15, 0.85)", rotationAngle = "-15") {
    // Create a new canvas to draw the graded image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Determine a sensible dimension for the grade mark based on image size
    const minDim = Math.min(canvas.width, canvas.height);
    const baseFontSize = Math.max(minDim * 0.25, 40); 

    // Set up the context for drawing the red ink grade mark
    ctx.save();
    
    // Position the mark typically in the top right quadrant
    let x = canvas.width - baseFontSize * 1.3;
    let y = baseFontSize * 1.2;
    
    // Fallback: if the image is too small or narrow, move towards the center
    if (x < canvas.width / 2) x = canvas.width / 2;
    if (y > canvas.height / 2) y = canvas.height / 2;

    // Translate and rotate to simulate a slightly crooked, hand-stamped grade
    ctx.translate(x, y);
    ctx.rotate(parseFloat(rotationAngle) * Math.PI / 180);

    // Teacher's red pen styling
    ctx.fillStyle = color;
    ctx.strokeStyle = color;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    
    // Adding a slight shadow to simulate wet ink bleeding slightly into the paper
    ctx.shadowColor = 'rgba(200, 0, 0, 0.4)';
    ctx.shadowBlur = 4;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    // Draw an organic (slightly tall) oval around the grade mimicking a quick hand-drawn circle
    ctx.beginPath();
    ctx.ellipse(0, 0, baseFontSize * 0.7, baseFontSize * 0.8, 0, 0, 2 * Math.PI);
    ctx.lineWidth = Math.max(minDim * 0.012, 2);
    ctx.stroke();

    // Draw the Grade text (using pseudo-handwriting web-safe fonts)
    ctx.font = `bold ${baseFontSize}px "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Brush Script MT", cursive`;
    ctx.fillText(grade, 0, baseFontSize * 0.05);

    // Draw the comment below the circle
    const commentFontSize = baseFontSize * 0.25;
    ctx.font = `bold italic ${commentFontSize}px "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Brush Script MT", cursive`;
    ctx.fillText(comment, 0, baseFontSize * 0.95);

    // Draw a quick squiggly line (signature/underline) under the comment
    ctx.beginPath();
    ctx.moveTo(-baseFontSize * 0.6, baseFontSize * 1.2);
    ctx.bezierCurveTo(
        -baseFontSize * 0.2, baseFontSize * 1.0,
        baseFontSize * 0.2, baseFontSize * 1.4,
        baseFontSize * 0.7, baseFontSize * 1.1
    );
    ctx.lineWidth = Math.max(minDim * 0.008, 1);
    ctx.stroke();

    ctx.restore();

    return canvas;
}