Etch-A-Sketch

So in my learning of JavaScript, with Wes Bos, I've now created an Etch-a-Sketch. Use the arrow keys and have a go. Below I'll explain how it works, this is another way of learning. By explaining something means that you  truly understand how it works.

HTML

<div class="canvaswrap">
  <canvas width="1600" height="1000" id="etch-a-sketch"></canvas>
  <div>
    <button>Shake!</button>
  </div>
</div> 

This is simple really, a <canvas> to draw upon and a <button> to reset the canvas.

JavaScript

Setting up the Variables

const canvas = document.querySelector(`#etch-a-sketch`);
const shake = document.querySelector(`.shake`);
const ctx = canvas.getContext(`2d`);
const MOVE_AMOUNT = 5;
const { width, height } = canvas;
let x = Math.floor(Math.random() * width);
let y = Math.floor(Math.random() * height);
let hue = 0;

canvas

This creates a variable called canvas from the id="etch-a-sketch" which is set on the <canvas> element

shake

This creates a variable called from the class="shake" which is set on the <button> element

ctx

This sets the context of the canvas to 2d

MOVE_AMOUNT

This sets a variable for how far the dot will move and how big the dot will be

width, height

These are destructured variables taken directly from the canvas, you can find out move about destructuring assignments at javascript.info.

x, y

Here I am setting x and y to be a random point on the canvas based upon its width & height.

hue

This is setting a starting value for the colour of the dot, this will be then used in a hsl colour setting later on.

Setting up the canvas for drawing on

ctx.lineJoin = `round`;
ctx.lineCap = `round`;
ctx.lineWidth = MOVE_AMOUNT;
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.stroke(); 

Here we are setting up the default settings to start drawing on the <canvas> .

lineJoin & lineCap

These 2 settings tell the line how to join to other lines and how the end of the line will look.

There are 3 options for lineJoin:

There are 3 options for lineCap:

lineWidth

This sets how wide the line will be that's drawn on the <canvas> .

strokeStyle

This is used to set how the stroke will look.

There are 3 options for strokeStyle:

In my example, I'm setting the colour to be an hsl value with the hue variable, saturation 100% and lightness 50% - hsl(${hue}, 100%, 50%) .

beginPath()

This simply starts a new path on the <canvas> .

moveTo()

This sets the start point of a new path/stroke on the <canvas> .

lineTo()

This sets where to draw the path/stroke to on the <canvas> .

stroke()

This will draw the stroke between moveTo() and lineTo() on the <canvas> .

Listening to the Arrow Key events

const handleKey = event => {
  if (event.key.includes('Arrow')) {
    event.preventDefault();
    draw({ key: event.key });
  }
};

This is an arrow functions called handleKey which has a parameter called event . This allows use the say, for every event that happens do these things…

In this case it means:

Drawing stuff on the <canvas>

So at this point after creating all these functions and variable I actually need to draw something on then <canvas> .

const draw = ({key}) =&gt; {
  hue += MOVE_AMOUNT;
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();
  if (x > width) {x = width;}
  if (x < 0) {x = 0;}
  if (y > height) {y = height;}
  if (y < 0) {y = 0;}
  ctx.moveTo(x, y);
  switch (key) {
    case 'ArrowUp':
      y -= MOVE_AMOUNT;
        break;
      case 'ArrowDown':
      y += MOVE_AMOUNT;
        break;
      case 'ArrowLeft':
      x -= MOVE_AMOUNT;
        break;
      case 'ArrowRight':
      x += MOVE_AMOUNT;
        break;
      default:
        break;
    }
    ctx.lineTo(x, y);
    ctx.stroke();
};

So this is relatively simple I'm setting the variables created earlier.

Clear the Canvas when Finished

const clearCanvas = () => {
  canvas.classList.add('shake');
  ctx.clearRect(0, 0, width, height);
  canvas.addEventListener('animationend', function(){
    canvas.classList.remove('shake')
    },
  {once: true}
);} 

This function says when the <button class="shake">Shake</button>, is clicked then clear the <canvas>.