JavaScript ile Html'de canvas'a smiley çizdirmek

Javascript ile html üzerinde Path kullanarak çizimler yapmak mümkün. Bu çizimlere dair birkaç örnek paylaşmak istiyorum, giriş olarak da gecenin son sorusunu bu örneğe ayırmak istedim.

Gülen yüz emojisi, iç içe 4 şekilden oluşuyor:

1. Dışarıda büyük bir halka (yüz)

2. İçeride sol tarafta küçük bir daire (sol göz)

3. İçeride sağ tarafta küçük bir daire (sağ göz)

4. Bir arc (gülen ağız)

Bu şekillerin çizdirilerek doğru yerlere konumlandırması ile şu şekilde bir çıktı alabiliyoruz:

Şimdi bu şekli alabilmek için nasıl bir kodlamaya ihtiyacımız olduğuna bakalım. Html tarafında, üzerine çizim yapacağımız bir canvas (tuval) gerekli. Boyutları ise bize kalmış.

<canvas id="tuval" style="height: 200px;width: 400px;"></canvas>

JavaScript ile bu tuvali boyayalım:

var canvas = document.getElementById('tuval');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Yüz
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Ağız
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Sol göz
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Sağ göz
    ctx.stroke();
  }
  }
  draw();

Şimdi işi biraz daha eğlenceli hale getirelim ve emojileri renklendirelim.

Kodlar:

function sevin() {

  var canvas = document.getElementById('tuval');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
	
	ctx.fillStyle = "#d1d118";
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
	ctx.fill();
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false); ///////////////
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI , true);
    ctx.stroke();
  }
  }
  
  function uzul() {

  var canvas = document.getElementById('tuval2');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
	
	ctx.fillStyle = "#c82124";
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
	ctx.fill();
    ctx.moveTo(110, 110);
    ctx.arc(75, 110, 35, 0, Math.PI, true); ///////////////////
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
    ctx.stroke();
  }
  }
  sevin();
  uzul();