Project 8:HTML 5 Canvas

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 8 and project 8. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 8 challenge of Wes Bos Javascript30 course.

Final result:

Press rerun to clear canvas.

ADDED FUNCTIONALITIES: I have made this project compatible for mouse operated and touch screen devices.

My source code

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

Here I've simply used canvas element to create a canvas. The important part is the style added to container.
I'll explain this part in javascript part for better understanding.

PART 3:JAVASCRIPT

Now we will make our project interactive.
Initially I've took draw id from dom and have given it a height and width equal to that of window's height and width respectively.

let canvas=document.getElementById('draw');
//setup size of camvas to cover the whole screen
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;

Now i will use getContext to get the type of content that is returned from canvas. Since we want to create 2d drawings,we'll set it at 2d.
Now I've simply set the properties-
1.setStroke- It is used to set the color of the stroke that'll be drawn.
2.lineCap- It sets the shape with which our stroke will start with in the beginning.
3.lineJoin- It sets the shape at joining point of two lines.

ctx.strokeStyle=`black`;
ctx.lineJoin='circle';
ctx.lineCap='circle';

Now we will create a flag that will decide whether or not we have to draw strokes or not. We don't want to show unnecessary strokes when user stops touching screen/clicking or user touches anywhere away from canvas.

let flag=false;

Initially it is set false as it will set true only if user touches screen/clicks on canvas element.

Now we will add event listeners on canvas.
I have used pointer events and not mouse events as shown in course's video to make it compatible for both touch devices/mouse operated devices. Read more about this event

1.First action that user will do is simply click/touch on the screen.

canvas.addEventListener('pointdown',(e)=>{flag=true; 
    [startX,startY]=[e.offsetX,e.offsetY];

    })

startX and startY are the coordinates of the points where user clicks and hence the point user want to begin drawing from. offsets give the coordinates where pointdown was called.

2.User will move around the canvas. This is where the strokes have to be shown and thus we will call draw function.

canvas.addEventListener('pointmove',draw);

3.User will stop touching/clicking canvas or user will click/touch away from canvas. In both these cases we'll set out flag to false as we do not want draw function to be called (No strokes should be drawn)

//if user stops pressing mouse
canvas.addEventListener('pointup',()=>flag=false);
//if user clicks anywhere other than canvas
canvas.addEventListener('pointout',()=>flag=false);

Now we will create draw function-

function draw(e){
    if(flag==false) return;//user is not drawing
    //  setting varying color 
    ctx.strokeStyle=`hsl(${hue},100%,50%)`;
    //start path of stroke
    ctx.beginPath();
    //move to the starting point where user clicked
    ctx.moveTo(startX,startY);
    //draw line till this point 
    ctx.lineTo(e.offsetX,e.offsetY);
    //offset property returns the coordinate at which mouse if clicked. so it will join the line to the point where user keeps moving the mouse.
    ctx.stroke();
    //actually drawing the line between the points

    //setting start points to the last point at which user stopped drawing,without this if draw is triggered then starting point will stick to mousedown offsets only and we want it to start from the point where mouse is being moved currently.
    [startX,startY]=[e.offsetX,e.offsetY];
 //we want color to start from the hue=0 value when it reaches 360.
    hue=(hue>360?0:hue+1);
}

Now let's take the inline css part we talked about in the html part. The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action. Without touch-action:none browser will cancel our pointermove and so we won't be able to continue our stroke. Setting it to none prevents this problem. For more info

Things I learnt:

Literally everything written. 🥴

Previous article from this series:

Day 7 project 7

Conclusion

That's it for today's project.Next project will be project 9 where we will discuss about 14 Dev Tool tricks.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)