Please bookmark this page to avoid losing your image tool!

Image Rule Of Thirds Grid Overlay Tool

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg, lineColor = 'rgba(255, 255, 255, 0.7)', lineWidth = 2) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the natural dimensions of the image
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Set canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Calculate the positions for the Rule of Thirds grid lines
    const oneThirdWidth = imgWidth / 3;
    const twoThirdsWidth = (imgWidth / 3) * 2;
    const oneThirdHeight = imgHeight / 3;
    const twoThirdsHeight = (imgHeight / 3) * 2;

    // Set line properties
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    // To ensure crisp lines, especially for 1px lines.
    // Adjust coordinates by 0.5 if lineWidth is odd.
    const offset = lineWidth % 2 === 1 ? 0.5 : 0;


    // Begin drawing paths
    ctx.beginPath();

    // Draw vertical lines
    ctx.moveTo(Math.round(oneThirdWidth) + offset, 0);
    ctx.lineTo(Math.round(oneThirdWidth) + offset, imgHeight);

    ctx.moveTo(Math.round(twoThirdsWidth) + offset, 0);
    ctx.lineTo(Math.round(twoThirdsWidth) + offset, imgHeight);

    // Draw horizontal lines
    ctx.moveTo(0, Math.round(oneThirdHeight) + offset);
    ctx.lineTo(imgWidth, Math.round(oneThirdHeight) + offset);

    ctx.moveTo(0, Math.round(twoThirdsHeight) + offset);
    ctx.lineTo(imgWidth, Math.round(twoThirdsHeight) + offset);

    // Stroke the path to draw the lines
    ctx.stroke();

    // Return the canvas with the image and grid
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Create a custom image tool

Description

The Image Rule Of Thirds Grid Overlay Tool allows users to overlay a grid based on the Rule of Thirds onto any image. This technique divides the image into nine equal segments with two vertical and two horizontal lines, which helps in visual composition and framing. Photographers and designers can utilize this tool to enhance their image composition, ensuring that key elements are aligned with the intersecting lines and grid sections, thereby creating more balanced and engaging visuals.