Please bookmark this page to avoid losing your image tool!

Image To Pencil Sketch Converter

(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.
/**
 * Converts an image to a pencil sketch effect using canvas filters and blend modes.
 *
 * The effect is achieved by following these steps:
 * 1. Create a base layer by converting the original image to grayscale.
 * 2. Create a top layer by converting the image to grayscale, inverting the colors, and applying a Gaussian blur.
 * 3. Blend the top layer onto the base layer using the 'color-dodge' composite operation. This operation brightens the base layer based on the top layer's color, creating the highlight and stroke effects characteristic of a pencil sketch.
 *
 * @param {HTMLImageElement} originalImg The original image object to be converted.
 * @param {number} blurRadius The radius of the Gaussian blur applied to the inverted layer, in pixels. This value controls the thickness and intensity of the sketch lines. A higher value results in thicker, softer strokes. Defaults to 4.
 * @returns {HTMLCanvasElement} A new canvas element displaying the pencil sketch version of the image.
 */
function processImage(originalImg, blurRadius = 4) {
    // Ensure blurRadius is a valid non-negative number
    const safeBlurRadius = Math.max(0, Number(blurRadius));

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create the final canvas that will be returned to the user
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = width;
    finalCanvas.height = height;
    const finalCtx = finalCanvas.getContext('2d');

    // Create a temporary canvas to generate the top layer for blending
    const topLayerCanvas = document.createElement('canvas');
    topLayerCanvas.width = width;
    topLayerCanvas.height = height;
    const topLayerCtx = topLayerCanvas.getContext('2d');

    // STEP 1: Draw the bottom layer (a grayscale version of the image) onto the final canvas.
    finalCtx.filter = 'grayscale(100%)';
    finalCtx.drawImage(originalImg, 0, 0, width, height);
    // Reset the filter so it doesn't affect subsequent drawing operations
    finalCtx.filter = 'none';

    // STEP 2: Create the top layer on the temporary canvas.
    // This involves converting to grayscale, inverting the colors, and blurring.
    // The CSS-style filter property allows us to chain these operations efficiently.
    topLayerCtx.filter = `grayscale(100%) invert(100%) blur(${safeBlurRadius}px)`;
    topLayerCtx.drawImage(originalImg, 0, 0, width, height);

    // STEP 3: Blend the blurred, inverted top layer onto the grayscale bottom layer.
    // 'color-dodge' is the key blending mode that creates the sketch effect by
    // dividing the bottom layer by the inverted top layer.
    finalCtx.globalCompositeOperation = 'color-dodge';
    finalCtx.drawImage(topLayerCanvas, 0, 0);

    // Reset the composite operation to the default for any future drawing on this context
    finalCtx.globalCompositeOperation = 'source-over';

    return finalCanvas;
}

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 To Pencil Sketch Converter transforms your images into artistic pencil sketches. By applying advanced canvas techniques, this tool converts your original photo into a grayscale base layer and blends it with a blurred, inverted version to create the delicate lines and highlights seen in pencil drawings. This tool is ideal for artists, graphic designers, or anyone looking to give their photos a unique and artistic touch, perfect for creating custom artwork, illustrations, or enhancing personal projects.

Leave a Reply

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