szymonzalarski98
9/5/2018 - 7:46 AM

HTML Canvas with JS handling

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas</title>
</head>
<body>

<canvas id="draw" width="800" height="800"></canvas>
<script>
    const canvas = document.querySelector('#draw');
    const ctx = canvas.getContext('2d');
    //getContext zwraca nam wartosc canvasu albo null
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.strokeStyle = '#BADA55';
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = 10;
    //to sa defunicje wygladu
    let isDrawing = false;
    //mamy rysowac tylko na ekranie jezeli wcisniety jest przycisk na myszy
    let lastX = 0;
    let lastY = 0;
    let hue = 0;
    let direction = true;

    function draw(e) {
        if(!isDrawing) return;
        //jezeli isDrawing == true dostajemy loga do konsoli, funkcja dziala
        //stopuje funkcje w momencie kiedy nie mamy przycisnietego przycisku na myszy 
        console.log(e);
        ctx.beginPath();
        ctx.moveTo(lastX,lastY);
        //od tego miejsca zaczyna sie rysunek
        ctx.lineTo(e.offsetX, e.offsetY);
        //do tego miejsca tworzy sie linia
        ctx.stroke();
        //w momencie gdy nie zainicjujemy stroke nie zadziala nam stroke style
        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
        hue++;
        //za kazdym razem gdy funkcja sie wykonuje hue sie powieksza czyli kolor sie zmienia
        //hsl to taka tecza kolorow, zaczyna się na czerwonym kolorze i konczy na czerwonym
        if(hue >= 360) {
            hue = 0;
        }
        //ten if subskrybuje sie na wartosc hue i w momencie kiedy hue dojdzie do konca, czyli 360
        //zmienia jego wartosc ponownie na 0 i tak w nieskonczonosc
        if(ctx.lineWidth >= 50 || ctx.lineWidth <= 1) {
            direction = !direction;
        }
        //ten if zmienia kierunek wzrostu width lini ktora rysujemy
        if(direction) {
            ctx.lineWidth++;
            //jezeli direction == true linia sie zwieksza
        } else {
            ctx.lineWidth--;
            //jezeli direction != true linia sie zmniejsza
        }
        [lastX, lastY] = [e.offsetX, e.offsetY];
        //to samo co nizej
        // lastX = e.offsetX;
        // lastY = e.offsetY;
    }

    canvas.addEventListener('mousemove', draw);
    //za kazdym razem kiedy ruszamy myszka na canvasie odpala nam sie funkcja draw
    canvas.addEventListener('mousedown', (e) =>  {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];
        //to jest po to zeby zaczac rysowanie od tego miejsca, gdzie nacisnelismy przycisk myszy
    });
    //jezeli klawisz jest wcisniety ma zmienic na true
    canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseout', () => isDrawing = false);
    //klawisz nie jest wcisniety dlatego zmienna jest false
</script>

<style>
  html, body {
    margin:0;
  }
</style>

</body>
</html>