day 03 of 1000 days (canvas basics)

Welcome, hope you all are enjoying the weekend. Today I decided to take a break as I have to visit some relatives. I did study some topics, as I think we should progress/study each day even if small. as no day should get wasted.

! I don't know how to put images here so won't be able to share drawings. Pardon me for that.

What I did in brief: I studied canvas element in HTML and revised array methods in javascript. The basic reason for studying canvas was that I had an interest in gaming in past. So I think I can get comfortable with classes etc in js faster. I will make projects for sure but just adding some fun element. I was already familiar with js method(not all), but almost that much which I can use most of the time. In this blog, I will only tell about canvas.

Canvas:- introduced in html5. it uses canvas API to help in drawing bitmap images[pixel images no need to go deep]. Earlier we have to use flash plugin(3rd party). in HTML we write as below with an optional error message, not required now as most browsers support it.

<canvas id="myCanvas"> Your browser is not supported</canvas>

I also discovered that we can use id directly as a variable in javascript, but it's probably not good practice. Also in body tag add onload="pageLoaded();". Now in js, write the code in function pageLoaded(){....}. I have to use this as I have habit of using the script on head with defer keyword. I was having problems in loading images with this. If I use it in the bottom of the body this was not required. I tried to load an image with js using new Image(), but no success. I may be wrong but this is what I found till now. To use it in js

const canvas = document.getElementById("myCanvas"); 
const c = canvas.getContext("2d");

The canvas API provides getContext which provides object containing methods to draw. We can use 2d or 3d(webgl/webgpu).

Drawing in canvas:-> Coordinates unlink maths is on the top left(0,0) and +ve x is towards right, and +ve y is towards bottom. By default canvas is transparent. We can draw rectangles, complex drawings by line, arc, text and use images(sprites). Remember fill = colored body and stroke=outline only.

For rectangle there are 3 methods:-

c.fillRect(x,y,w,h)        //filled rectangle
c. strokeRect(x,y,w,h)    //outline rectangle
c.clearRect(x,y,w,h)      // is used to remove any drawing

x,y= coordinates. w,h= dimensions

For complex path:-

c. beginPath()    //starts recoding the path
c. closePath()    //optional, join current point with start point
                //drawing shown only after fill and stroke
c.fill()         //fill the drawing and auto close it also if open   
c.stroke()        //draw outline
c.moveTo(x,y)        //move drawing point or cursor to that point
c.lintTo(x,y)        //draw line from current point to x,y
c.arc(x,y,radius,start angle,end angle,anti/clock) //x,y = center
                        //anti =true , clockwise =false
                        //angle are in radians Math.PI=180 degree

For text : - use fillText(text,x,y) , strokeText(text,x,y). we have to style these in js, not in css. eg c.font="16px Comic Sans ms". Also, define css before these.

For image drawing:- Sprites are somewhat like an anime character with various motions/moves in a picture.

 c.drawImage(img,x,y)        //img= image object   
 c.drawImage(img,x,y,w,h)    //scales img upto w,h dimention
 c.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, x, y,width, height)            //this is mostly used, we cut part of image and show it on canvas. hence various motion can be shown with continuously showing and removing.

Transforming and rotating:-

c.translate(x,y)  //move origin to x,y  
c.rotate(ang)     //clockwise, around origin
c.scale(x,y)      //use -ve values for oposite direction

Color:- default color is black. To change it we use fillStyle or strokeStyle = "....". It accepts css color like rgb, #hex etc.

Personal:-

Family and friends do play important role in your life and journey do give some time towards them. I also spent time with my family today and enjoyed it a lot. Thanks.