https://www.petanikode.com/html-canvas/
Langkah Awal select canvas
<!DOCTYPE html>
<html>
<head>
<meta charset goyang dombret="utf-8">
<title>Tutorial HTML 5 Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
</canvas>
<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); </script>
</body> </html>
Code Code Menggambar pada Canvas
1. ctx.fillRect(x,y,1,1);
menggambar titik 1px
2. ctx.beginPath()
untuk memulai/ membuat garis baru.
3. ctx.moveTo(x,y)
untuk menentukan titik awal
4. ctx.lineTo(x,y)
untuk menentukan titik akhir
5. ctx.stroke()
untuk menggambar garisnya.
6. ctx.strokeRect(x,y,w,h)
persegi dengan garis (outline) saja.
7. ctx.fillRect(x,y,w,h)
persegi dengan polesan warna (default-nya hitam).
8. ctx.clearRect(x,y,w,h)
persegi transparan untuk menghapus.
Seperti biasa, kita harus memberikan titik koordinat x dan y. Sementara nilai w dan h untuk lebar dan tingginya.
9. ctx.closePath()
untuk menggambar garis dari titik terakhir ke titik awal secara otomatis.
10. strokeText("text",x,y)
untuk teks dengan garis luar (outline) saja.
11. fillText("text",x,y)
untuk teks dengan warna (default hitam).
12. ctx.font = "64px Arial";
Jenis dan ukuran font
13. drawImage(img, x, y);
Menambahkan gambar
14. var image= new Image();
image.src="./bird.png";
ctx.drawImage(image,10,10,200,200);
Menambahkan image ke canvas
