바닐라 JS로 그림 앱 만들기 #1 THE CANVAS API

ctx.arc(200,100,50,0,2*Math.PI);
ctx.fill(); //fill()을 해줘야 보임

ctx.beginPath(); //style을 다시 지정해주기 위해 (색을 바꾸려고)
ctx.fillStyle ="white";
ctx.arc(200.1,100,5,0,2*Math.PI);
ctx.fill();​

 

결과

 

 

 

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d"); //ctx(context)는 canvas에서 사용하는 brush

canvas.width = 400;
canvas.height = 400;

ctx.rect(10,10,50,50); //선 긋고
ctx.rect(60,60,50,50); //선 긋고
ctx.fill(); //채우기
ctx.rect(120,120,50,50); //얘는 안 채워서 안 보임

 

결과