Please bookmark this page to avoid losing your image tool!

Image Anatomical Drawing Filter Effect 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.
function processImage(originalImg, blurRadius = 1, lineDarkness = 1.2, paperColor = "#f8f8f8", sourceContrast = 120) {
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Apply logical constraints to numerical parameters
    // Ensure blurRadius is not negative
    const safeBlurRadius = Math.max(0, Number(blurRadius)); 
    // Clamp lineDarkness to a practical range (e.g., 0.1 to 5.0)
    // This controls brightness from 122.5% down to 0% in the brightnessPercent calculation
    const safeLineDarkness = Math.max(0.1, Math.min(Number(lineDarkness), 5.0)); 
    // Ensure sourceContrast is not negative
    const safeSourceContrast = Math.max(0, Number(sourceContrast)); 

    // 1. Create output canvas and fill with paper color
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = w;
    outputCanvas.height = h;
    const outputCtx = outputCanvas.getContext('2d');
    
    outputCtx.fillStyle = paperColor;
    outputCtx.fillRect(0, 0, w, h);

    // 2. Grayscale and Contrasted Layer (`grayCanvas`)
    const grayCanvas = document.createElement('canvas');
    grayCanvas.width = w;
    grayCanvas.height = h;
    const grayCtx = grayCanvas.getContext('2d');

    // Apply grayscale and contrast filters
    grayCtx.filter = `grayscale(100%) contrast(${safeSourceContrast}%)`;
    grayCtx.drawImage(originalImg, 0, 0, w, h);
    grayCtx.filter = 'none'; // Clear filter for any subsequent draws on this context

    // 3. Inverted, Brightness-Adjusted, Blurred Layer (`invBlurCanvas`)
    const invBlurCanvas = document.createElement('canvas');
    invBlurCanvas.width = w;
    invBlurCanvas.height = h;
    const invBlurCtx = invBlurCanvas.getContext('2d');

    // Calculate brightness adjustment for the inverted layer based on lineDarkness
    // lineDarkness = 1.0 -> brightness = 100% (normal)
    // lineDarkness > 1.0 -> brightness < 100% (inverted layer darker -> final lines stronger)
    // lineDarkness < 1.0 -> brightness > 100% (inverted layer lighter -> final lines fainter)
    const brightnessPercent = 100 - (safeLineDarkness - 1.0) * 25;
    
    invBlurCtx.filter = `invert(100%) brightness(${brightnessPercent}%) blur(${safeBlurRadius}px)`;
    invBlurCtx.drawImage(grayCanvas, 0, 0, w, h); // Source for this layer is the gray/contrasted image
    invBlurCtx.filter = 'none'; // Clear filter

    // 4. Create Sketch on a Temporary Canvas (`tempSketchCanvas`) with a white background
    // This is crucial because `color-dodge` produces the standard sketch effect on a white base.
    const tempSketchCanvas = document.createElement('canvas');
    tempSketchCanvas.width = w;
    tempSketchCanvas.height = h;
    const tempSketchCtx = tempSketchCanvas.getContext('2d');

    tempSketchCtx.fillStyle = 'white'; // Sketch is created on a white "virtual paper"
    tempSketchCtx.fillRect(0, 0, w, h);
    
    // Draw the grayscale base image
    tempSketchCtx.drawImage(grayCanvas, 0, 0, w, h); 

    // Apply color-dodge blending with the inverted-blurred layer
    tempSketchCtx.globalCompositeOperation = 'color-dodge';
    tempSketchCtx.drawImage(invBlurCanvas, 0, 0, w, h); 
    
    tempSketchCtx.globalCompositeOperation = 'source-over'; // Reset composite operation

    // 5. Blend the B&W sketch (from tempSketchCanvas) onto the outputCanvas (already filled with paperColor)
    // 'multiply' blend mode: white areas of the sketch become transparent to the paperColor,
    // black lines remain black (or dark, as if drawn on the colored paper).
    outputCtx.globalCompositeOperation = 'multiply';
    outputCtx.drawImage(tempSketchCanvas, 0, 0, w, h);
    outputCtx.globalCompositeOperation = 'source-over'; // Reset composite operation

    return outputCanvas;
}

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 Anatomical Drawing Filter Effect Tool transforms photographs into stylized anatomical drawing effects. By applying grayscale, contrast adjustments, and blurring alongside innovative blending techniques, this tool creates an artistic representation that mimics the appearance of hand-drawn sketches on a textured paper background. It is particularly useful for artists, designers, and educators looking to create unique visual presentations of anatomical subjects or for illustrating concepts in a more visually engaging manner.

Leave a Reply

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