Please bookmark this page to avoid losing your image tool!

Image To Gray Pencil Sketch Converter

(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.

/**
 * Converts an image to a gray pencil sketch effect.
 *
 * This function simulates a pencil sketch by performing the following steps:
 * 1. Creates a grayscale version of the original image.
 * 2. Creates a second version that is grayscaled, color-inverted, and blurred.
 * 3. Blends these two versions using the 'color-dodge' composite operation,
 *    which results in a sketch-like image with defined lines.
 *
 * @param {HTMLImageElement} originalImg The original image object to convert.
 * @returns {HTMLCanvasElement} A canvas element displaying the pencil sketch image.
 */
function processImage(originalImg) {
    const {
        width,
        height
    } = originalImg;

    // Create the main canvas that will be returned
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    // Create an off-screen canvas for the inverted/blurred layer
    const dodgeCanvas = document.createElement('canvas');
    const dodgeCtx = dodgeCanvas.getContext('2d');
    dodgeCanvas.width = width;
    dodgeCanvas.height = height;

    // 1. Draw the inverted, blurred, grayscale layer on the off-screen canvas.
    // The blur radius is a key factor in how thick the "pencil" lines appear.
    dodgeCtx.filter = 'grayscale(100%) invert(100%) blur(8px)';
    dodgeCtx.drawImage(originalImg, 0, 0, width, height);

    // 2. Draw the base grayscale layer on the main canvas.
    ctx.filter = 'grayscale(100%)';
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // 3. Apply the 'color-dodge' blend mode. This is the magic step that
    // creates the sketch effect by brightening pixels based on the two layers.
    ctx.globalCompositeOperation = 'color-dodge';
    ctx.drawImage(dodgeCanvas, 0, 0, width, height);

    // 4. Reset filters and composite operations to default values
    ctx.filter = 'none';
    ctx.globalCompositeOperation = 'source-over';

    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 To Gray Pencil Sketch Converter transforms your images into artistic pencil sketches. By converting the original image into grayscale and applying a unique blend of inversion and blurring, this tool simulates the effect of a hand-drawn sketch. This tool is ideal for users looking to create artistic renditions of their photographs, enhance visual presentations, or generate unique content for creative projects and social media. Users can easily upload their images and receive a stylized sketch suitable for printing or digital use.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: