canvas is a 2D drawing API, besides SVG, CSS, or direct DOM Animation

canvas is good for: chart, dynamic diagrams, and video games.

creating a canvas is simply using:

<canvas> Text alternative </canvas>

you can set the size using CSS, but the size on CSS is the element size, not the
canvas size. You can set canvas size in the html attribute or in the JS:

canvas.width/height properties.
the value cant be the style properties, because css can only affect the
rectangle element surrounding.
the values can be:
canvas.scrollHeight
canvas.scrollWidth
document.innerWidth
document.innerHeight

//drawing on canvas//

to draw on canvas, you'll need first get the drawing context by:

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

here we use the 2D API, there is another one: WebGL, under development

the only shape directy supported is rectangle, hence c.fillRect.

other functions:
c.fillStyle="color";
c.beginPath();
c.moveTo(x,y);
c.lineTo(x,y);
c.bezierCurveTo(x1,y1,x2,y2,x3,y3); -> 6 arguments (4 points starting from
previous defined coordinate).
c.quadraticCurveTo(x1,y1,x2,y2);
c.closePath();
c.fill();
c.strokeStyle="color";
c.lineWidth=number;
c.stroke();

context modifiying:
c.save();
c.restore();
c.rotate(rad);
c.translate(x,y);

beginPath() and closePath is a must on every shape making.

to draw a circle, first you need to understand the concept.

circle in canvas is drawn using arc() method. it takes the form:

c.arc(x,y,radius,start-rad,end-rad,iscounterclockwise); ->default is
clockwise
 x and y are the coordinates of the midpoint of the circle
radius is self-explained and is in px
start-rad is the starting of the radian. 0 is at direction of 3 o'clock and
it goes on clockwise direction
rad-size is the angle size in radian. full circle is 6.28rad (2*pi)
conversion between degree and radian is:
degree to rad -> degree*PI/180;
rad to degree -> rad*180/PI;

tips: to make a pie diagram

c.strokeStyle="maroon";
c.beginPath();
c.moveTo(300,200);
c.arc(300,200,100,0*Math.PI/180,60*Math.PI/180);
c.closePath();
c.stroke();

Loading images:

c.drawImage(image-object,dx,dy);
image object is created using:
var a=new Image();
a.src="img.png";

c.drawImage(img,dx,dy,dw,dh);
c.drawImage(img,sx,sy,sw,sh, dx,dy,dw,dh); //croping
-> the common case is, that the function starts before the image object is
fully loaded, so it's better to call it in onload event of the img object.

Image object has properties: naturalWidth and naturalHeight which represent

the actual width and height of the image file.

TEXT:

c.font="italic 14pt sans-serif"; -> just like in css rule

c.fillText("Kue pisang", 400,400); -> x and y is the baseline of the text

GRADIENT:
let g=c.createLinearGradient(x1,y1,x2,y2);
let r=c.createRadialGradient(sx,sy,sr,ex,ey,er); s->start, e->end
g.addColorStop(0,"color");
g.addColorStop(0.5,"color");
g.addColorStop(1,"color");
The coordinate is in the canvas coordinate, not the shape. This gradient can
be applied on fillStyle or strokeStyle properties of the context.

PATTERN:
You can create pattern object and it can be used in the fillStyle property with
this:
var p= c.createPattern(img,'repeat'); repeat is just like in the css
property.
the img can be image, video or other canvas(you dont need to hardcode the
tempcanvas in the html file.)

ANIMATION:
animating frames in canvas is like traditional animation. You change the frames bit
by bit to make illusion of movement. thus you'll need these functions:
 c.clearRect(x,y,w,h) -> to clear up canvas (be sure to check canvas height
and width)
window.requestAnimationFrame(update) -> put this in your update(), thus
recursively updating your frames

OPACITY:
c.globalApha= value between 0 and 1.0

CLIP:
Set the previously created shape as a clip.
c.fillrect(0,0,400,400);
c.clip();
->clip is a permanent state and can be removed by wrapping it
inside .save and .restore

EVENTS:
You can check if a point in the canvas is in a path or not by using method
c.isPointInPath(x,y);
Other alternative to check out is Amino