<!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>