Please bookmark this page to avoid losing your image tool!

Image To Brush Pen Art Creator

(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.
async function processImage(originalImg, brushSize = 6, strokeDensity = 5, strokeLength = 8, strokeColor = '#1a1a1a', backgroundColor = '#f5f5dc', randomness = 0.5) {
    // 1. Create canvases and contexts
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const {
        width,
        height
    } = originalImg;
    canvas.width = width;
    canvas.height = height;

    // Create a temporary canvas for image data processing
    const processingCanvas = document.createElement('canvas');
    const processingCtx = processingCanvas.getContext('2d');
    processingCanvas.width = width;
    processingCanvas.height = height;

    // 2. Prepare the background "paper"
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, width, height);

    // 3. Get pixel data from the original image
    processingCtx.drawImage(originalImg, 0, 0, width, height);
    const imageData = processingCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // 4. Set up brush properties for drawing
    ctx.strokeStyle = strokeColor;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // 5. Iterate through the image in steps and draw brush strokes
    const step = Math.max(1, Math.floor(strokeDensity));

    for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
            // Get the pixel index in the data array
            const index = (y * width + x) * 4;
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            const a = data[index + 3];

            // Skip transparent pixels
            if (a === 0) {
                continue;
            }

            // Convert pixel color to grayscale brightness (0 to 1)
            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

            // Invert brightness because darker areas need thicker strokes
            const invertedBrightness = 1 - brightness;

            // Only draw if the area is dark enough
            if (invertedBrightness > 0.15) {
                // Calculate line width based on brightness
                const lineWidth = Math.pow(invertedBrightness, 2) * brushSize;
                ctx.lineWidth = Math.max(0.5, lineWidth);

                // Add randomness to position to avoid a grid-like appearance
                const randX = x + (Math.random() - 0.5) * step * randomness;
                const randY = y + (Math.random() - 0.5) * step * randomness;

                // Create a base angle for strokes (e.g., 45 degrees) and add randomness
                const angle = (Math.PI / 4) + (Math.random() - 0.5) * Math.PI / 2 * randomness;

                // Calculate stroke length, slightly randomized
                const len = strokeLength * (0.8 + Math.random() * 0.4);
                const endX = randX + Math.cos(angle) * len;
                const endY = randY + Math.sin(angle) * len;

                // Draw the stroke
                ctx.beginPath();
                ctx.moveTo(randX, randY);
                ctx.lineTo(endX, endY);
                ctx.stroke();

                // Occasionally add a secondary, thinner stroke for more texture
                if (Math.random() > 0.7) {
                    ctx.lineWidth = Math.max(0.2, lineWidth * 0.5);
                    const angle2 = angle + (Math.random() - 0.5) * Math.PI / 8;
                    ctx.beginPath();
                    ctx.moveTo(randX, randY);
                    ctx.lineTo(
                        randX + Math.cos(angle2) * len * 0.8,
                        randY + Math.sin(angle2) * len * 0.8
                    );
                    ctx.stroke();
                }
            }
        }
    }

    // 6. Return the final canvas
    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 To Brush Pen Art Creator is an online tool that transforms your images into artistic brush pen-style artwork. It allows you to customize various parameters such as brush size, stroke density, stroke length, stroke color, and background color to create unique interpretations of your images. This tool can be particularly useful for artists, designers, and hobbyists looking to generate decorative graphics, illustrations, or personalized artwork for gifts and projects. Whether for social media, printing, or other creative uses, this tool offers a fun way to reinterpret visual content.

Leave a Reply

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