Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Maker</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas></canvas>
<script src="app.js"></script>
</body>
</html><canvas></canvas> 일반적인 이미지 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다.
app.js
const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
canvas.width = 750
canvas.height = 750
ctx.fillRect(210,200,15,100)
ctx.fillRect(350,200,15,100)
ctx.fillRect(260,200,65,200)
ctx.arc(290,100,50,0,2 * Math.PI)
ctx.fill()
ctx.beginPath()
ctx.fillStyle = "white"
ctx.arc(270,100,8,Math.PI,2*Math.PI)
ctx.arc(310,100,8,Math.PI,2*Math.PI)
ctx.fill().fillRect() x,y,width,height 설정하여 색칠된 도형을 출력한다.
.strokeRect() x,y,width,height 설정하여 도형의 윤곽선을 출력한다.
.moveTo() 펜을 x와 y 로 지정된 좌표로 옮긴다.
.lineTo() 현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그린다.
.fill() 경로의 내부를 채워서 내부가 채워진 도형을 그린다.
.beginPath() 화면 위에 붓이 있다는 가정하에 그려진 경로부터 새로운 경로를 만든다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 된다.
.arc() (x, y) 위치에 원점을 두면서, 반지름 r을 가지고, startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 된다. 
style.css
canvas {
width: 750px;
height: 750px;
border: 5px solid black;
}
body {
display: flex;
justify-content: center;
align-items: center;
}실행 화면
코린이 화이팅