Masih dalam seputar tentang penggunaan canvas kali ini saya akan menambahkannya dengan kegunaan shape untuk canvas di HTML5,  Jika teman-teman masih asing dengan kata-kata shape adalah sebutan khusus untuk ‘bentuk’ seperti persegi panjang, lingkaran, atau bentuk poligon lain. jadi yang teman-teman ingat sekarang adalah mengingatnya seperti materi matematika bangun ruang ya teman-teman. Dan disini kita akan mencoba membuatnya, oke jangan kemana-mana simak terus ya teman-teman.

Selain menggunakan atau kegunaan shape untuk canvas di HTML5 beberapa garis secara manual seperti contoh persegi panjang, kita juga bisa menggunakan perintah context.rect() untuk membuat persegi panjang. Jadi kita juga butuh bantuan perintah context.rect() ya teman-teman, oke langsung saja kita liat contoh penggunaanya berikut contohnya:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Belajar Canvas HTML5 dan kegunaan shape untuk canvas di HTML5</title>
<style>
	canvas {
	border: 1px solid red;
	}
</style>
</head>
<body>
	<canvas id="kertas_gambar" width="500" height="300"></canvas>
<script>
	var canvasku = document.getElementById("kertas_gambar");
	var context = canvasku.getContext("2d");
	context.lineWidth = 20;
	context.strokeStyle = "black";
	context.rect(50, 50, 350, 150);
	context.stroke();
	context.fillStyle = "yellow";
	context.fill();
</script>
</body>
</html>

Oke sekarang kita baca dulu kode di atas, yang perlu teman-teman perhatikan kita lihat adalah:

context.rect(50, 50, 350, 150);

Dimana kode di atas akan membuat canvas dengan bentuk shape persegi panjang pasti teman-teman bertanya, kenapa dan apa bedanya, iya jika kita kali ini tidak menggunakan cara pembuatan canvas biasa namun bedanya kali ini kita menggunakan context.rect yang akan membuat bentuk persegi panjang, oke selanjutnya didalam style terdapat selector canvas diamana berarti kita akan membuatnya si canvas itu kita beri style yaitu border, jika kita lihat terdapat border dengan ketebalan 1px solid dan berwarna merah, dan di dalam tag canvas terdapat atribut id=”kertas gambar” yang kita akan gunakan kedalam script java script, oke karena di dalam tag java script terdapat banyak atribut dan kita juga tidak lagi mebahas lebih dalam lagi tentang java script teman-teman bisa abaikan ya, teman-teman bisa fokus ke context.rect saja ya teman-teman dan bagaimana hasil gambarnya sebagai berikut:

kegunaan shape untuk canvas di HTML5

Dan saya rasa cukup sampai disini dulu belajar kita tentang kegunaan shape untuk canvas di HTML5, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya, Terimakasih.