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):

That is all for Day08 ✅

Thanks for reading, See you tomorrow!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store