Please bookmark this page to avoid losing your image tool!

Image Freehand Drawing Tool

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * Creates an interactive canvas on top of an image, allowing for freehand drawing.
 *
 * @param {HTMLImageElement} originalImg The original image element to be drawn upon.
 * @param {string} [color='red'] The color of the drawing stroke (e.g., 'red', '#FF0000').
 * @param {number} [lineWidth=5] The width of the drawing stroke in pixels.
 * @returns {HTMLCanvasElement} A canvas element with the image and drawing capabilities.
 */
function processImage(originalImg, color = 'red', lineWidth = 5) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Style the canvas for better user experience
    canvas.style.cursor = 'crosshair';

    // Configure the drawing context
    ctx.strokeStyle = color;
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round'; // Makes line ends rounded
    ctx.lineJoin = 'round'; // Makes line corners rounded

    // State variables for drawing
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    /**
     * Calculates the coordinates of a mouse or touch event relative to the canvas.
     * @param {MouseEvent | TouchEvent} e The mouse or touch event.
     * @returns {{x: number, y: number}} The coordinates.
     */
    function getEventCoordinates(e) {
        const rect = canvas.getBoundingClientRect();
        let x, y;

        if (e.touches && e.touches.length > 0) {
            // Touch event
            x = e.touches[0].clientX - rect.left;
            y = e.touches[0].clientY - rect.top;
        } else {
            // Mouse event
            x = e.clientX - rect.left;
            y = e.clientY - rect.top;
        }
        return { x, y };
    }

    /**
     * Handles the mousedown / touchstart event to begin a drawing stroke.
     * @param {MouseEvent | TouchEvent} e The event.
     */
    function startDrawing(e) {
        e.preventDefault();
        isDrawing = true;
        const { x, y } = getEventCoordinates(e);
        [lastX, lastY] = [x, y];

        // Begin a new path
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
    }

    /**
     * Handles the mousemove / touchmove event to draw a line segment.
     * @param {MouseEvent | TouchEvent} e The event.
     */
    function draw(e) {
        if (!isDrawing) return;
        e.preventDefault();
        const { x, y } = getEventCoordinates(e);

        // Draw a line to the new position
        ctx.lineTo(x, y);
        ctx.stroke();

        [lastX, lastY] = [x, y];
    }

    /**
     * Handles mouseup / touchend / mouseout events to stop drawing.
     */
    function stopDrawing() {
        if (isDrawing) {
            isDrawing = false;
        }
    }

    // Add event listeners for both mouse and touch events
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseout', stopDrawing);

    canvas.addEventListener('touchstart', startDrawing, { passive: false });
    canvas.addEventListener('touchmove', draw, { passive: false });
    canvas.addEventListener('touchend', stopDrawing);
    canvas.addEventListener('touchcancel', stopDrawing);

    return canvas;
}

Free Image Tool Creator

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

Description

The Image Freehand Drawing Tool provides an interactive canvas over an image, allowing users to draw freely using a mouse or touch input. Users can choose their drawing color and stroke width, enabling personalized artwork or annotations on images. This tool is useful for artists wishing to create digital art, educators for annotating materials, and anyone needing to mark up or illustrate ideas on top of existing images.

Leave a Reply

Your email address will not be published. Required fields are marked *