<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Fun With Html Canvas</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <canvas id="draw" width="800" height="800"></canvas>

    <script>      
        const canvas = document.querySelector('#draw');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        ctx.strokeStyle = '#BADA55';
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.lineWidth = 100;
        ctx.globalCompositeOperation = 'multiply';

        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let hue = 0;
        let direction = true;

        function draw(e) {
            if (!isDrawing) return;
            console.log(e);
            ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
            //ctx.lineWidth = hue;
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
            [lastX, lastY] = [e.offsetX, e.offsetY];

            hue++;
            if (hue >= 360) {
                hue = 0;
            }

            if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
                direction = !direction;
            }

            if (direction) {
                ctx.lineWidth++;
            } else {
                ctx.lineWidth--;
            }
        }

        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });


        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', () => isDrawing = false);
        canvas.addEventListener('mouseout', () => isDrawing = false);
    </script>
</body>

</html>
{'avg_line_length': 26.6231884057971, 'max_line_length': 69, 'alphanum_fraction': 0.49156232988568316, 'licenses': ['MIT'], 'repository_name': 'aslihanozfidan/javascript30-course', 'path': '08FunWithHtmlCanvas/index.html', 'size': 1837, 'lang': 'HTML'}