5 <canvas id="MyCanvas" width="200" height="200" style="border:1px solid #DC143C;"> </canvas> </body> <script> var c = document.getElementById("MyCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 200); ctx.strokeStyle ="green"; ctx.stroke(); </script> </html> Referensi : w3schools.com.(modifikasi) Setelah kita membuat canvas pada HTML, maka kita dapat menambahkan JavaScrip dengan diawali tag <script> kemudian ditutup dengan tag </script>. Pada bagian code diatas var c = document.getElementById("MyCanvas"); bertujuan untuk memilih elemen pada HTML dengan id MyCanvas. var ctx = c.getContext("2d"); digunakan untuk membuat sebuah object dengan nama ctx yang nantinya akan kita gunakan untuk menggambar. ctx.moveTo(0, 0); dan ctx.lineTo(200, 200); adalah code untuk menentukan titik awal dan titik akhir gambar yang akan dibuat yaitu dari titik (0,0) sampai ke titik (200,200). ctx.stroke(); adalah sebuah garis yang akan kita gambar di dalamMyCanvas. Ada tambahan code yaitu ctx.strokeStyle ="green"; yang berfungsi untuk
RkJQdWJsaXNoZXIy MTM3NDc5MQ==