Objek Canvas pada HTML untuk menggambar dengan javascript.

Apa itu Canvas
Dunia nyata, canvas adalah kain berpori sebagai media untuk membuat lukisan.
Dunia maya, canvas adalah tag dari HTML5 (HTML versi 5) lewat javascript sebagai media berupa kotak putih untuk menggambar 2D. Menggambar pada canvas juga tag HTML5 lewat javascript. Misalnya menggambar objek titik, garis, kotak, teks dan menampilkan gambar.

Penggunaan
Canvas terdiri dari suatu objek kotak putih didefinisikan dalam kode HTML dengan atribut tinggi(koordinat y) dan atribut lebar(koordinat x) . Kode JavaScript dapat mengakses daerah melalui set lengkap menggambar fungsi yang sama dengan yang lainnya API 2D umum, sehingga memungkinkan untuk grafis yang dihasilkan secara dinamis. Beberapa penggunaan diantisipasi canvas mencakup grafik bangunan, animasi, game, dan komposisi gambar.

tag: <canvas> </canvas>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

nama: myCanvas, panjang (x): 200, lebar(y) : 100, gaya: dengan garis tepi 1 piksel warna hitam pekat

syntax:
membuat canvas baru :

var x = document.createElement("CANVAS");

mengaktifkan properti:

var ctx = x.getContext("2d");

memberi warna :

ctx.fillStyle = "blue";

membuat rectanggle/ kotak :

ctx.fillRect(20, 20, 250, 100);

(batas kiri, batas atas, panjang vertikal, lebar horisontal)

 

menampilkan gambar

document.body.appendChild(x);

 

Membuat Garis

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

Membuat Kotak

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px black;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
</script> 

</body>
</html>