Membuat Setengah Lingkaran di Canvas HTML5

Pada artikel hari ini saya akan membahas tentang HTML5 Canvas Semicircle yang atinya membuat setengah lingkaran pada canvas HTML 5. Untuk dapat membuat Kanvas setengah lingkaran pada HTML 5, kita dapat menggunakan Method arc() dan mendefinisikan sudut akhir dan sudut awal.

Format penulisannya seperti ini.

x dan y adalah posisi pusat lingkaran, r adalah radius atau jari-jari lingkaran, startAngle adalah sudut awal pembuatan arc dalam satuan radian dan endAngle adalah sudut terakhir pembuatan arc, sedangkan anticlockwise bernilai true jika pembuatan arc searah jarum jam dan false berlawanan arah jarum jam.

Pertama kita akan buat elemen canvas sebagai berikut

Untuk dapat menggambar setengah lingkaran, kita dapat menggabungkan perintah beginPath() dan closePath(). Metode beginPath() untuk menyatakan bahwa kita akan menggambar. Kemudian buat tag script dan masukkan perintah berikut

Penjelasan :
Dengan fungsi closePath() agar membentuk poligon tertutup maka path harus ditutup.
lineWidth : nilai ketebalan garis.
strokeStyle : memberikan warna pada garis.

Sehingga hasilnya sebagai berikut.

Selamat Mencoba.