Day08 of #100DaysOfCode

#100DaysofCode

Hii folks 🙌

Today I have completed the 8th video of JavaScript30!

Project 08: Fun with HTML5 Canvas

Source: https://javascript30.com

Learnings:

HTML Canvas

This is done in the body of the HTML code. The size of the canvas is also set!

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

Now within the script tags, Instructor set the contexts of the canvas already.

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'; //blend mode

Adding event listeners to detect mouse movement.

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

Passing the event into a function.

function draw(e) {
  if (!isDrawing) return; // stop the fn from running when they are not moused down
  console.log(e);
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();
  // start from
  ctx.moveTo(lastX, lastY);
  // go to
  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--;
  }
}

HTML5 Canvas is new to me. I will try something similar to build!!

Today I learned (T-I-L):

• getContext()
• Mother-effing
• HTML Canvas

That is all for Day08 ✅

Thanks for reading, See you tomorrow!