Canvas with ANY COLOR

Code

<!DOCTYPE html>

<head>

<title>Simple Drawing App</title>

<style>

body {

text-align: center;

font-family: Arial, sans-serif;

background-color: #f4f4f4;

}

canvas {

border: 2px solid black;

background-color: white;

cursor: crosshair;

}

.controls {

margin-top: 10px;

}

</style>

</head>

<body>

<h1>HTML Canvas Drawing App</h1>

<label>Color: <input type="color" id="colorPicker" value="#000000"></label>

<button onclick="clearCanvas()">Clear</button>

</div>

const canvas = document.getElementById("drawingCanvas");

const ctx = canvas.getContext("2d");

let drawing = false;

let color = document.getElementById("colorPicker").value;

let size = document.getElementById("sizePicker").value;

canvas.addEventListener("mousedown", () => drawing = true);

canvas.addEventListener("mouseup", () => drawing = false);

canvas.addEventListener("mousemove", draw);

document.getElementById("colorPicker").addEventListener("input", function() {

color = this.value;

});

document.getElementById("sizePicker").addEventListener("input", function() {

size = this.value;

});

function draw(event) {

if (!drawing) return;

ctx.lineWidth = size;

ctx.lineCap = "round";

ctx.strokeStyle = color;

ctx.lineTo(event.offsetX, event.offsetY);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(event.offsetX, event.offsetY);

}

function clearCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

}

</script>

</body>

</html>