Cancas Çizim Fonksiyonları

 //canvas elementini daha hızlı kontrol

etmeyeyarayan fonksiyonlar içerir

//html dosyasında body etiketi kapatılmadan

 önce eklenmesi doğru bi' karar olur

//canvas etiketinin id bilgisi "c" olarak kabul edilmiştir

//toplamda 8 tane const ile tutulmuş değişken içerir

//6 fonksiyon barındırır fonksiyonlar const ile tutulmuştur

const c = document.getElementById("c");

const ctx = c.getContext('2d');

const drawRect = (x,y,w,h,color)=>{

    ctx.fillStyle = color;

    ctx.fillRect(x,y,w,h);

}

const drawCircleF=(x,y,r,color)=>{

ctx.fillStyle = color;

ctx.beginPath();

ctx.arc(x,y,r,0,2 * Math.PI,false);

ctx.closePath();

ctx.fill();

}

const drawCircleS=(x,y,r,w,color)=>{

ctx.strokeStyle = color;

ctx.lineWidth = w;

ctx.beginPath();

ctx.arc(x,y,r,0,2 * Math.PI);

ctx.closePath();

ctx.stroke();

}

const drawText = (text,x,y,color)=>{

ctx.fillStyle = color;

ctx.font = "50px sans-serif";

ctx.fillText(text,x,y);

}

const drawLine = (x,y,w,h)=>{

ctx.moveTo(x,y);

ctx.lineTo(w,h);

ctx.stroke();

}

const drawArc = (x,y,r,alfa)=>{

    ctx.beginPath();

ctx.arc(x,y,r,0,2*Math.PI/alfa);

ctx.stroke();

}