<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        canvas {
            border: 1px solid white;
            background-color: black;
        }
    </style>
</head>
<body>
    <label for="width">Canvas Width (mm):</label>
    <input type="number" id="width" value="1000">
    <label for="height">Canvas Height (mm):</label>
    <input type="number" id="height" value="700">
    <button onclick="setupCanvas()">Set Canvas</button>
    <br><br>
    <button onclick="generateMultipleStrokes()">Generate Random Strokes</button>
    <button onclick="clearCanvas()">Clear Canvas</button>
    <button onclick="saveAsImage()">Save as JPG</button>
    <br><br>
    <canvas id="paintCanvas"></canvas>
    
    <script>
        const canvas = document.getElementById('paintCanvas');
        const ctx = canvas.getContext('2d');
        
        function setupCanvas() {
            const width = parseInt(document.getElementById('width').value);
            const height = parseInt(document.getElementById('height').value);
            canvas.width = width;
            canvas.height = height;
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        function getRandomColor() {
            return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
        }

       function generateStroke() {
    const startX = Math.random() * canvas.width;
    const startY = Math.random() * canvas.height;
    const direction = Math.random() * 2 * Math.PI;
    const maxLength = Math.min(canvas.width, canvas.height);
    const strokeLength = Math.random() * maxLength;
    
    const endX = Math.min(Math.max(startX + strokeLength * Math.cos(direction), 0), canvas.width);
    const endY = Math.min(Math.max(startY + strokeLength * Math.sin(direction), 0), canvas.height);

    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const a = Math.random().toFixed(2); // transparens mellom 0.00 og 1.00

    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`; // bruk rgba for transparens
    ctx.lineWidth = Math.random() * 10 + 1; // bredde fra 1 til 11 px
    ctx.stroke();
}


        function generateMultipleStrokes() {
            const numLines = Math.floor(Math.random() * 20) + 1; 
            for (let i = 0; i < numLines; i++) {
                generateStroke();
            }
        }

        function clearCanvas() {
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        function saveAsImage() {
            const tempCanvas = document.createElement('canvas');
            const tempCtx = tempCanvas.getContext('2d');
            tempCanvas.width = canvas.width;
            tempCanvas.height = canvas.height;
            
            tempCtx.fillStyle = 'black';
            tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
            tempCtx.drawImage(canvas, 0, 0);
            
            const link = document.createElement('a');
            link.download = 'random_paintbrush.jpg';
            link.href = tempCanvas.toDataURL('image/jpeg', 1.0);
            link.click();
        }
     </script>
Home