Please bookmark this page to avoid losing your image tool!

Image To Bob Ross Style Painting 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.
function processImage(originalImg, brushStrokeSize = 8, strokeIntensity = 0.6, textureAmount = 30) {
    // 1. SETUP: Create canvases and get original image data
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Source canvas to hold the original image and access its pixel data
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = width;
    sourceCanvas.height = height;
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    sourceCtx.drawImage(originalImg, 0, 0);
    const sourceImageData = sourceCtx.getImageData(0, 0, width, height).data;

    // Main canvas where the "painting" will be rendered
    const paintedCanvas = document.createElement('canvas');
    paintedCanvas.width = width;
    paintedCanvas.height = height;
    const paintedCtx = paintedCanvas.getContext('2d');
    paintedCtx.fillStyle = '#FFF'; // Start with a white "gesso" layer
    paintedCtx.fillRect(0, 0, width, height);


    // 2. PAINTERLY RENDERING: Iterate and draw strokes
    // The step size determines the density of brush strokes. A smaller step means more strokes.
    const step = Math.max(1, Math.floor(brushStrokeSize / 2.5));

    for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
            // Get the color from the corresponding pixel in the source image
            const pixelIndex = (y * width + x) * 4;
            const r = sourceImageData[pixelIndex];
            const g = sourceImageData[pixelIndex + 1];
            const b = sourceImageData[pixelIndex + 2];

            // Set the color for the brush stroke with some transparency for a wet-on-wet feel
            paintedCtx.fillStyle = `rgba(${r},${g},${b}, 0.7)`;

            // Randomize stroke position to simulate hand-drawn imperfection and smudging
            const jitterX = (Math.random() - 0.5) * brushStrokeSize * strokeIntensity;
            const jitterY = (Math.random() - 0.5) * brushStrokeSize * strokeIntensity;
            
            // Randomize stroke size for a more organic look
            const currentStrokeSize = brushStrokeSize * (Math.random() * 0.75 + 0.25);

            // Draw the brush stroke as a rectangle for an impasto/blocky effect
            paintedCtx.fillRect(x + jitterX, y + jitterY, currentStrokeSize, currentStrokeSize);
        }
    }


    // 3. TEXTURE: Create a canvas texture layer
    const textureCanvas = document.createElement('canvas');
    textureCanvas.width = width;
    textureCanvas.height = height;
    const textureCtx = textureCanvas.getContext('2d');
    
    const textureImageData = textureCtx.createImageData(width, height);
    const data = textureImageData.data;
    for (let i = 0; i < data.length; i += 4) {
        // Generate monochrome noise
        const noise = (Math.random() - 0.5) * textureAmount;
        data[i] = 128 + noise;     // Red
        data[i + 1] = 128 + noise; // Green
        data[i + 2] = 128 + noise; // Blue
        data[i + 3] = 255;         // Alpha
    }
    textureCtx.putImageData(textureImageData, 0, 0);


    // 4. COMPOSITING: Blend the texture onto the painting
    paintedCtx.globalAlpha = 0.2; // Control the texture's visibility
    paintedCtx.globalCompositeOperation = 'overlay'; // 'overlay' is great for adding texture
    paintedCtx.drawImage(textureCanvas, 0, 0);

    // Reset settings for the next step
    paintedCtx.globalAlpha = 1.0;
    paintedCtx.globalCompositeOperation = 'source-over';


    // 5. FINAL TOUCHES: Apply color grading
    // Create a final canvas to apply filters to the entire composed image
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = width;
    finalCanvas.height = height;
    const finalCtx = finalCanvas.getContext('2d');

    // Apply filters to mimic the vibrant, slightly aged look of an oil painting
    finalCtx.filter = 'saturate(1.2) contrast(1.1) brightness(1.05)';
    finalCtx.drawImage(paintedCanvas, 0, 0);

    // The final canvas is the result
    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 Bob Ross Style Painting Converter transforms your images into artistic representations inspired by the signature oil painting style of Bob Ross. This tool allows users to select brush stroke sizes, stroke intensities, and texture amounts to create unique, painterly effects. It’s ideal for artists, designers, or anyone looking to add a creative twist to their photos, making them suitable for personal projects, social media posts, or as gifts.

Leave a Reply

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