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.