Browser Anda tidak dapat memutar video ini

Question

Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser menggunakan Flash.

Table of Contents Show

Apa itu Canvas?
Cara Membuat Canvas di HTML
Menggambar di Canvas
Cara Menggambar Titik pada Canvas
Cara Menggambar Garis pada Canvas
Cara Menggambar Persegi pada Canvas
Cara Menggambar Segitiga pada Canvas
Cara Menggambar Lingkaran pada Canvas
Cara Meyisipkan Teks pada Canvas
Cara Me-render Gambar pada Canvas
Pemrograman Game Berbasis HTML5
Pemrograman Grafis atau Grafika Komputer
Akhir Kata…

Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga digunakan untuk memutar video.

Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube.

Namun semuanya berubah setelah kedatangan HTML5… 1

HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas.

Apa itu Canvas?

Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis. Biasanya menggunakan pensil dan cat.

Dalam pemrograman, canvas adalah elemen yang bisa digambar dengan kode. 2

Canvas adalah elemen baru di HTML5 untuk menggambar (render) grafik, image, dan teks.

Cara Membuat Canvas di HTML

Canvas dapat dibuat dengan tag

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

3, jangan lupa juga untuk memberikan ukuran tinggi dan lebarnya.

<canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
</canvas>

Kita berikan sedikit style

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

4 untuk membuat garis tepi.

Selanjutnya kita harus menggunakan DOM API untuk memanipulasi canvas, biasanya dilakukan seperti ini:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Fungsi

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

5 untuk memilih elemen HTML dengan id

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

6.

Selanjutnya variabel

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

7 (konteks) adalah objek dari canvas yang bisa kita manfaatkan untuk menggambar.

Contoh kode lengkapnya:

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

Sekarang kita punya canvas kosong yang siap untuk digambar…

Siapkan imajinasimu dan mulailah menggamabar dengan kode 😄.

Menggambar di Canvas

Jika pada dunia nyata kita menggunakan pensil untuk menggambar, maka di canvas HTML5 menggunakan objek

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

7.

Objek

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

7 bisa kita anggap sebagai pensil. Objek ini memiliki beberapa method untuk menggambar di canvas seperti

ctx.fillRect(x,y,1,1);

0,

ctx.fillRect(x,y,1,1);

1,

ctx.fillRect(x,y,1,1);

2, dsb.

Nah untuk menggambar dengan method-method tersebut, kita harus menentukan koordinat titik

ctx.fillRect(x,y,1,1);

3 dan

ctx.fillRect(x,y,1,1);

4-nya.

Karena canvas terdiri dari kumpulan piksel yang membentuk diagram kartesius terbalik.

Cara Menggambar Titik pada Canvas

Pertama kita akan coba menggambar sebuah titik.

Dalam seni rupa, titik adalah bagian terkecil dari sebuah objek yang menempati suatu ruang. Sedangkan dalam ilmu matematika geometri, titik adalah objek

ctx.fillRect(x,y,1,1);

5-dimensi yang tidak memiliki panjang, lebar, dan tinggi. 3

Tapi dalam komputer titik adalah ukuran 1 piksel dari layar.

Untuk menggambar titik pada canvas, kita dapat menggunakan method

ctx.fillRect(x,y,1,1);

0 dengan ukuran 1x1 piksel.

ctx.fillRect(x,y,1,1);

Variabel

ctx.fillRect(x,y,1,1);

3 dan

ctx.fillRect(x,y,1,1);

4 kita ganti dengan nilai koordinatnya, misalkan kita ingin menggambar titik pada koordinat

ctx.fillRect(x,y,1,1);

9.

ctx.fillRect(10,10,1,1);

Mari kita coba dalam kode:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px
            ctx.fillRect(10,10,1,1);
        </script>

    </body>
</html>

Hasilnya:

(Lakukan pembesaran (zoom in) sampai 500% untuk melihatnya)

Cara Menggambar Garis pada Canvas

Garis adalah kumpulan dari titik-titik yang saling terhubung. Ada empat fungsi yang kita butuhkan untuk membuat garis.

```
ctx.fillRect(10,10,1,1);
```
0 untuk membuat garis baru.
```
ctx.fillRect(10,10,1,1);
```
1 untuk menentukan titik awal.
```
ctx.fillRect(10,10,1,1);
```
2 untuk menentukan titik akhir.
```
ctx.fillRect(10,10,1,1);
```
3 untuk menggambar garisnya.

Mari kita coba…

Misalkan kita ingin menggambar garis dari titik

ctx.fillRect(x,y,1,1);

9 sampai titik

ctx.fillRect(10,10,1,1);

5.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>

Hasilnya:

Cara Menggambar Persegi pada Canvas

Ada tiga fungsi yang digunakan untuk menggambar persegi pada canvas:

```
ctx.fillRect(10,10,1,1);
```
6 persegi dengan garis (outline) saja.
```
ctx.fillRect(10,10,1,1);
```
7 persegi dengan polesan warna (default-nya hitam).
```
ctx.fillRect(10,10,1,1);
```
8 persegi transparan untuk menghapus.

Seperti biasa, kita harus memberikan titik koordinat

ctx.fillRect(x,y,1,1);

3 dan

ctx.fillRect(x,y,1,1);

4. Sementara nilai

<!DOCTYPE html> <html> <head> <meta charset="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"); // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px ctx.fillRect(10,10,1,1); </script> </body> </html>

1 dan

<!DOCTYPE html> <html> <head> <meta charset="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"); // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px ctx.fillRect(10,10,1,1); </script> </body> </html>

2 untuk lebar dan tingginya.

Mari kita coba:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>

Hasilnya:

Lalu bagaimana contoh yang

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px
            ctx.fillRect(10,10,1,1);
        </script>

    </body>
</html>

3?

Method

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px
            ctx.fillRect(10,10,1,1);
        </script>

    </body>
</html>

3 digunakan untuk menghapus gambar.

Contohnya: Kita ingin menhapus pada titik

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px
            ctx.fillRect(10,10,1,1);
        </script>

    </body>
</html>

5 sampai

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px
            ctx.fillRect(10,10,1,1);
        </script>

    </body>
</html>

6.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(10,10,100,100);
ctx.clearRect(5,5,20,20);
ctx.fillRect(120,10,100,100);

Maka hasilnya:

Cara Menggambar Segitiga pada Canvas

Segitiga tidak memiliki method tesendiri seperti persegi (rectangle). Namun, bukan berarti kita tidak bisa menggambarnya.

Segitiga dapat digambar menggunakan fungsi/method dari garis.

Contohnya:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");


ctx.beginPath(); // mulai menggmabar
ctx.moveTo(100, 100); // titik awal
ctx.lineTo(100, 300); // titik ke-2
ctx.lineTo(300, 300); // titik ke-3
ctx.closePath(); // titik ke-3 ke titik awal

// buat garis
ctx.stroke();

Maka hasilnya:

Perhatikan: di sana ada fungsi

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px
            ctx.fillRect(10,10,1,1);
        </script>

    </body>
</html>

7, tugasnya untuk menggambar garis dari titik terakhir ke titik awal.

Pertama gambar garis dari titik awal ke titik ke-2:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

0

Lalu buat garis dari titik ke-2 menuju ke titik 3:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

1

Terakhir, buat garis dari titik ke-3 menuju ke titik awal:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

2

Maka jadilah segitiga… 😄

Cara Menggambar Lingkaran pada Canvas

Lingkaran digambar dengan method

ctx.fillRect(x,y,1,1);

1. Method ini memiliki 5 parameter yang wajib diberikan.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

3

Paramter:

ctx.fillRect(x,y,1,1);

3 untuk menentukan koordinat

ctx.fillRect(x,y,1,1);

3;

ctx.fillRect(x,y,1,1);

4 untuk menentukan koordinat

ctx.fillRect(x,y,1,1);

4;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>

3 untuk menentukan jari-jari lingkaran;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>

4 sudut awal dengan satuan radian (

ctx.fillRect(x,y,1,1);

5 radian dimulai dari arah jam 3);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>

6 sudut akhir dengan satuan radian;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>

7 (opsional) untuk menentukan arah menggambar lingkaran:

jika diberikan nilai

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>

8 maka akan menggambar berlawanan dengan arah jarum jam.

jika

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>

9 maka akan menggambar searah dengan jarum jam.

Nilai default-nya adalah

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>

9.

Paham…?

Mari kita coba:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

4

Hasilnya:

Penjelasan:

Pertama kita mulai menggmabar dengan

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>

1, gunakan selalu fungsi ini untuk mulai menggmabar.

Kedua menggmabar lingkaran dengan fungsi

ctx.fillRect(x,y,1,1);

1 dengan parameter yang ditentukan. Lingkaran digambar pada titik

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>

3 dengan ukuran jari-jari

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>

4 piksel.

Mulai digambar dari arah jam 3 (

ctx.fillRect(x,y,1,1);

5 radian) menuju kembali ke arah jam 3 (

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>

6 radian). 4

Gampang kan?

Cara Meyisipkan Teks pada Canvas

Ada dua fungsi untuk membuat teks:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>

7 untuk teks dengan garis luar (outline) saja.

```
ctx.fillRect(x,y,1,1);
```
2 untuk teks dengan warna (default hitam).

Fungsi tersebut memiliki tiga parameter yang wajib diberikan:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

5

Mari kita coba:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

6

Hasilnya:

Ada pengisian atribut

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>

9 pada kode di atas.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

7

Fungsinya untuk menentukan jenis font serta ukurannya. Nilainya seperti nilai atribut

<!DOCTYPE html>
<html>
    <head>
        <meta charset="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");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>

9 pada CSS.

Cara Me-render Gambar pada Canvas

Terakhir, kita akan coba me-render gambar ke canvas. Untuk melakukannya, kita membutuhkan sebuah gambar dan menggunakan fungsi

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(10,10,100,100);
ctx.clearRect(5,5,20,20);
ctx.fillRect(120,10,100,100);

1 untuk merender-nya ke canvas.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

8

Kita akan menggunakan gambar dari W3Schools: img_the_scream.jpg.

Pertama silahkan buat elemen

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(10,10,100,100);
ctx.clearRect(5,5,20,20);
ctx.fillRect(120,10,100,100);

2:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

9

Kemudian buat tombol render:

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

0

Terakhir membuat fungsi

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(10,10,100,100);
ctx.clearRect(5,5,20,20);
ctx.fillRect(120,10,100,100);

3:

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>

1

Kode lengkapnya:

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang 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>