#canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } // Get the canvas element var canvas = document.getElementById("canvas"); // Set canvas width and height to match the browser dimensions canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.addEventListener("click", function() { // Clear the canvas var context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); }); // Get the 2D rendering context var context = canvas.getContext("2d"); // Variables to track the starting point var startX, startY; // Event listener for mouse move event canvas.addEventListener("mousemove", function (event) { var x = event.clientX - canvas.getBoundingClientRect().left; var y = event.clientY - canvas.getBoundingClientRect().top; drawLine(startX, startY, x, y); // Draw a line from the previous position to the current position startX = x; startY = y; }); // Event listener for touch move event canvas.addEventListener("touchmove", function(event) { event.preventDefault(); // Prevent default touch behavior (e.g., scrolling) var x = event.touches[0].clientX - canvas.getBoundingClientRect().left; var y = event.touches[0].clientY - canvas.getBoundingClientRect().top; drawLine(startX, startY, x, y); // Draw a line from the previous position to the current position startX = x; startY = y; }); // Function to draw a line with transparency, blur, and changing random color every one second function drawLine(startX, startY, endX, endY) { context.beginPath(); context.moveTo(startX, startY); context.lineTo(endX, endY); var widthMax = Math.random() * 200.0 + 100.0; var widthMin = Math.random() * 100.0 + 0.0; // Set line width (stroke width) context.lineWidth = Math.random() * 1000.0 + 0.0; // Set line cap style randomly if (Math.random() < 0.1) { context.lineCap = "butt"; } else { context.lineCap = "butt"; } // Set transparency (alpha value) for the line context.globalAlpha = Math.random() * 0.5 + 0.0; // Apply blur effect to the line context.shadowColor = 'rgba(0, 0, 0, 0.0)'; context.shadowBlur = Math.random() * 10 + 5; context.stroke(); // Reset transparency and blur for subsequent drawings context.globalAlpha = 1; context.shadowBlur = 0; } // Function to generate a random color from the colors array function getRandomColor() { // Array of available colors var colors = ["yellow"]; var randomIndex = Math.floor(Math.random() * colors.length); return colors[randomIndex]; } // Function to update the line color every one second function updateLineColor() { var color = getRandomColor(); context.strokeStyle = color; } // Set initial line color updateLineColor(); // Update the line color every one second setInterval(updateLineColor, 1);