JavaScript30 - 8 Fun With HTML5 Canvas

Hello and welcome back to another exciting installment of my experience with Wes Bos's JavaScript30! This was probably the most fun I've had with the course so far! After starting this challenge I quickly decided to code along with Wes instead of trying to figure it out myself as I was very much out of my depth. I have never worked with Canvas before and there was plenty of syntax I did not understand. Could I possibly make my own version of an Etch-a-Sketch in a browser? Yeah sure, I could figure that out, but after seeing what he wanted as a finished product I took a step back.

So what was it that we did? Basically we did make an Etch-a-Sketch in HTML5 Canvas. The biggest difference was when you would draw the colors and size of the line would constantly change. I won't lie...how we managed to do this I still do not fully understand. But I do have a pretty decent idea.

As you can see from the picture above we ended up with an extremely colorful design, even if it isn't practical in the slightest. Basically, it seems Canvas is more or less "paint" but with more uses. I don't really see when I would be using it for any projects going forward but it was still a fun exercise as a whole.

Oh and learning about HSL was cool too! He took us to mother effing HSL so we could learn more about hues and colors. I would definitely recommend going to this site to see how you can mess with the color pallet. We used this by directly calling it in our code and incrementing it as we drew on the page.

      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.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 >= 175 || ctx.lineWidth <= 1) {
          direction = !direction;
        }
        if (direction) {
          ctx.lineWidth++;
        } else {
          ctx.lineWidth--;
        }
      }

You can also see how we changed the size of the line itself by switching the direction of how it either increments or decrements based on the movement of the mouse. One line of the code still confuses me just based on how much is actually going on. That being if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
direction = !direction;. This entire line is crazy to me. Mostly how its designed to flip on itself after getting to a certain amount. || still confuses me too and I'm not sold on how or why you would use a ! in JavaScript. I will be looking into this more after I write this post, but if anyone could explain either of these concepts to me a bit more I would greatly appreciate it.

There was one other pretty big revelation I had during this challenge. That would be the use of semicolons while writing JavaScript. I really haven't done this before, even though it was suggested to me. I figured that just ending a line and continuing on a new line would be enough. I know that you have to use semicolons in CSS and that if you don't not anything will work the way you want it to. This was the first time I ever had an issue with JavaScript by not using them. By not having a semicolon after ctx.stroke() my code basically broke. Okay, it still worked, but definitely not as intended. For some reason it ran into the following line of code but the semicolon fixed that completely. Lesson learned.

All in all this was a fun challenge. I greatly enjoyed messing around with HTML5 Canvas even if I barely scratched the surface in regards to all that you can do with it. I drew on my browser for longer than I should have and also went back and messed with some of the values (i.e how the hue would increment, the max width of the lines, etc..) just to see what would happen. I probably couldn't recreate this on my own if I tried but I am still so fascinated as to what can be done with a few lines of JavaScript!

That's all for todays challenge. If you have the time I would highly suggest trying this one for yourself as it was far and away the most fun I have had so far! Be on the lookout for my next installment of the JavaScript30 with: 14 Must Know Dev Tools Tricks!