BAB 1

PENDAHULUAN

1.1 Latar Belakang

Komputer grafik adalah ilmu dan seni berkomunikasi secara visual melalui tampilan
komputer dan perangkat interaksinya. Aspek visual komunikasi biasanya dalam arah
komputer-ke-manusia, dengan manusia-ke-komputer arah yang dimediasi oleh
perangkat seperti mouse, keyboard, joystick atau game pengontrol. Namun, ini pun
mulai berubah. Data visual mulai mengalir kembali ke komputer, dengan antarmuka
baru berdasarkan algoritme visi komputer yang diterapkan ke dalam video atau
kamera. tetapi untuk arah komputer-ke-pengguna, konsumen utama komunikasi
adalah manusia, dan dengan demikian cara manusia memandang citra sangat penting
dalam desain garfish Grafik komputer adalah bidang lintas disiplin yang di dalamnya
fisika, matematika, persepsi manusia, interaksi manusiakomputer, teknik, desain
grafis, dan seni semuanya memainkan peran penting.

Piksel adalah satu titik data dalam gambar digital atau di monitor, dan pengukuran
PPI menunjukkan jumlah piksel yang terkandung dalam gambar atau layar. Piksel per
inci dinyatakan dengan menunjukkan jumlah piksel yang tersedia secara horizontal
dengan jumlah yang tersedia secara vertikal. Titik dalam Grafika Komputer bisa
didefinisikan sebagai suatu posisi tertentu dalam suatu sistem koordinat. Sistem
koordinat yang dipakai bisa Polar Coordinates atau Cartesian Coordinates

Perkembangan dunia informasi dan teknologi sangat cepat. Termasuk dengan

teknologi yang baru-baru ini dimunculkan yaitu HTML 5. Pada awalnya HTML
merupakan sebuah halaman-halam yang berformat dan dapat dilihat oleh sedikit
program browser. Sasaran awal dari HTML itu sendiri adalah menyajikan sebuah
informasi teks yang dapat memungkinkan penggunanya terhubung atau beralih
kedalam halaman-halaman eb lainnya atau yangbiasa disebut Hyperlink diantara isi
dari website. Kini HTML tidak hanya mampu memformat sebuah teks akan tetapi
juga dapat menyajikan grafik dan dapat mengatur form-form data. HTML 5 adalah
generasi baru dari HTML, yang dirancang untuk memperbaiki teknologi HTML versi
sebelumnya agar dapat mendukung teknologi multimedia terbaru dan tipe isi halaman
web (content) lainnya agar mudah di jalanka oleh browser. HTML 5 merupakan hasil
kerja sama antara World Wide Web Consortium (W3C, http://www.w3.org/ ) &
WHATWG (Web HypertextApplication Teknologi Working Group ).
 BAB 2

ISI

2.1 Pembahasan

Grafika komputer atau dalam bahasa Inggris Computer Graphics dapat diartikan
sebagai seperangkat alat yang terdiri dari perangkat keras (hardware) dan perangkat
lunak (software) untuk membuat gambar, grafik atau citra realistik untuk seni, game
komputer, foto dan film animasi. Grafika komputer merupakan bagian yang paling
menarik dari bidang ilmu komputer. Ini dikarenakan untuk dapat memahaminya
dengan baik diperlukan kemampuan matematika dan juga keahlian untuk memrogram
dan kreativitas.

Sistem grafika komputer dapat dijalankan pada komputer pribadi (Personal

Computer) atau pada workstation. Sistem ini terdiri dari hardware dan software yang
digunakan untuk membuat sembarang objek 2 Dimensi (2D) dan 3 Dimensi (3D).

2.1.1 Sejarah Grafika Komputer

Sejarah grafika telah dimulai sejak jaman dahulu kala yaitu ketika bangsa Mesir,
Roma dan Yunani berkomunikasi secara grafik. Beberapa lukisan yang terdapat pada
batu nisan orang Mesir dapat dikatakan sebagai lukisan Teknik.

Leonardo da Vinci, pelukis dari Italia sudah menghasilkan lukisan dengan objek 3D
dengan pandangan isometrik. Proyeksi ortografik yang digunakan dalam sistem
grafika komputer sekarang ini, ditemukan oleh Gaspard Monge (1746-

1868), seorang ahli matematika berkebangsaan Perancis. Sekarang dengan bantuan

komputer yang semakin canggih, orang dapat menciptakan dan memanipulasi
sembarang gambar, grafik, foto atau citra dengan mudah dan hasil yang
menakjubkan.
Perkembangan grafika komputer secara sederhana dapat dibagi menjadi empat fase.
Fase pertama, dalam tahun lima puluhan merupakan era grafika komputer interaktif.

Pada mulanya, perkembangan grafika komputer interaktif tidak begitu cepat karena
teknologi, jumlah dan harga komputer tidak mendukungnya. Saat itu, komputer
merupakan barang mewah karena harganya yang sangat mahal.

Pada tahun 1950, MIT telah berhasil mengembangkan komputer whirlwind dengan
tabung sinar katode (Chatode Ray Tube-CRT). Komputer ini mampu memaparkan
grafik pasif yang digunakan untuk keperluan bidang pertahanan.

Pada akhir tahun 1950-an, banyak orang menggunakan pena cahaya (light-pen), yaitu
sebuah alat input bentuknya seperti pensil yang digunakan untuk memilih posisi,
menunjuk sesuatu dan menggambar pada layar dengan pendeteksian cahaya yang
datang dari titik-titik pada layar CRT. Selain itu, pada periode yang sama alat
pemrograman otomatis (Automatic Programming Tool) telah berhasil dibuat. Riset
komputer grafik interaktif mulai diteliti oleh perusahaan General Motors pada tahun
1959.

Fase kedua, dalam dekade 1960-an dapat dikatakan jaman penelitian/riset grafika
komputer interaktif. Saat ini, grafika interaktif modern telah berhasil ditemukan oleh
Ivan Sutherland dengan sistem penggambaran SKETCHPAD (Sutherland, 1963).
Beliau juga mengembangkan teknik interaktif dengan sarana keyboard dan pena
cahaya.

Pada pertengahan tahun 1960-an, sejumlah proyek penelitian dan produk Computer
Aided Design/Manufacturing (CAD/CAM) telah muncul. Saat itu, ungkapan CAD
mulai diterima untuk mewakili desain dibantu komputer. Pada tahun 1964,
perusahaan General Motors mengumumkan produk CAD yaitu DAC-1 atau Design
Augmented by Computer (Jacks, 1964). Seterusnya, tahun 1965, perusahaan
Lockheed Aircraft mulai proyek CADAM dan perusahaan Bell Telephone Laboratory
mengumumkan sistem display jarak jauh yaitu GRAPHIC1.
Fase ketiga, dimulai dalam dekade 1970-an. Saat ini, sektor industri, pemerintah dan
ilmuwan mulai sadar akan pentingnya grafika komputer interaktif untuk memperbaiki
kualitas desain produk secara cepat dan mudah.

Fase keempat, dalam dekade 1980-an. Masa ini grafika komputer berkembang pesat.
Banyak orang berlomba untuk menemukan teori dan algoritma baru. Penelitian pada
dekade ini bertumpu pada penggabungan dan pengotomatisasian pelbagai unsur
desain dan pemodelan pejal (solid modelling). Hal ini berguna untuk industri masa
depan.

Pada tahun 1990-an, teknologi model hibrid mulai diperkenalkan. Teknologi ini
berguna untuk penggabungan objek pejal dengan permukaan. Contohnya jika kita
melukis sebuah mobil. Bagian bodi/badan mobil merupakan satu permukaan
sedangkan bagian mesin merupakan bentuk pejal. Jika kita gabungkan dengan
teknologi model hibrid maka bodi mobil dan mesin membentuk sebuah mobil.

2.1.2 Peranan dan Penggunaan Grafika Komputer

Grafika komputer digunakan diberbagai bidang seni, sains, bisnis, pendidikan dan
hiburan. Sebagai contoh:

1. Antarmuka pengguna. Sering setiap aplikasi pada komputer pribadi menggunakan

Graphical User Interface (GUI). Semua GUI ini menggunakan grafika komputer.

2. Perpetaan (Cartography). Sering peta disimpan, dimanipulasi dan dilihat pada

komputer.

3. Kesehatan. Grafika komputer telah digunakan baik dalam perencanaan maupun

pelaksanaan pembedahan.

4. Computer Aided Design (CAD). Pengguna merancang banyak objek (seperti

bagian mekanik) menggunakan grafika komputer.
5. Sistem Multimedia. Grafika komputer memainkan peran yang penting dalam
sistem multimedia.

6. Presentasi grafika untuk produksi slide. Salah satu bidang penting dalam grafika
komputer dikenal sebagai “presentasi grafik” atau “grafik untuk bisnis”. Bidang ini
berfokus pada bagaimana menghasilkan gambar secara profesional, sering dalam
bentuk slide untuk menunjukkan kelompok pelanggan, kolega atau manajemen.
Sebagaimana slide sering berisi diagram batang atau diagram pie yang menunjukkan
informasi kompleks dalam bentuk yang mudah dipahami dan dimengerti. Contoh
aplikasi ini adalah Microsoft TM Power Point.

7. Sistem paint. Jenis aplikasi editor grafik yang lain. Sistem ini memungkinkan
pengguna beraksi layaknya seperti pelukis melukis objek dengan bantuan komputer.

8. Presentasi data saintifik. Data saintifik biasanya kompleks dan berhubungan antara
data yang satu dengan yang lain. Data saintifik ini biasanya susah untuk
divisualisasikan jika hanya dengan menggunakan piranti biasa. Sekarang ini,
presentasi data saintifik cukup mudah untuk divisualisasikan. Contohnya dengan
menggunakan software aplikasi Microsoft® Excel, Lotus, dan lain-lainnya.

9. Simulasi/pelatihan. Sistem ini memungkinkan pengguna menjalankan

simulasi/pelatihan tertentu. Misalnya: Simulator penerbang.

10. Aplikasi lain. Misalnya: desain jaringan logika interaktif, desain arsitektur
interaktif, desain struktur mekanik, kontrol proses, pengolahan citra, dan lain-lainnya.

2.1.3 Elemen Gambar untuk Menciptakan Gambar dalam Komputer

Penghasilan citra pada grafika komputer menggunakan primitif grafik dasar. Primitif
ini memudahkan untuk me-render (menggambar pada layar monitor) sebagaimana
penggunaan persamaan geometrik sederhana.
Contoh primitif grafik dasar adalah:

1. Titik

2. Garis

3. Segiempat

4. Lingkaran

Objek kompleks dapat dibuat dengan kombinasi dari primitif ini. Jenis primitif yang
lain adalah primitif output. Ini digunakan menyusun citra pada layar monitor.

Gambar 2.1 Primitif Grafik

Contoh primitif grafik yang lain adalah:

1. Poligaris, yaitu urutan garis lurus yang saling berhubungan.

2. Teks, yaitu bentuk bahasa tulisan dengan simbol-simbol tertentu. Teks merupakan
kumpulan dari lebih dari dua karakter.
3. Citra raster, yaitu gambar yang dibuat dengan pixel yang membedakan bayangan
dan warna. Citra raster ini disimpan dalam komputer sebagai larik bernilai numerik.
Larik tersebut dikenal sebagai pixel map atau bitmap. Ada tiga cara untuk
menghasilkan citra grafik yaitu Citra didesain dengan tangan, Citra yang didapat dari
perhitungan dan Citra yang di-scan. Pen-display-an citra raster dinyatakan oleh pixel
dengan video display (Cathode-ray Tube CRT), flat panel display (LCD), hard copy
(laser printers, dot matrix printers, ink-jet printers). Contoh proses pen-display-an
permukaan adalah citra ditangkap lalu disimpan di frame buffer. Kemudian nilai pixel
disimpan di frame buffer digunakan untuk mewarnai sebuah bintik pada permukaan
monitor. Selanjutnya proses scan di CRT. Frame buffer adalah matriks 2 dimensi
yang mewakili pixel pada monitor. Ukuran matriks harus cukup untuk menyimpan
kedalaman warna monitor untuk semua pixel. Contoh: monitor 1024 x 1280
mempunyai kedalaman warna 24 bit (~ 16 juta warna) membutuhkan ruang simpan
sekitar 4 Mb.

4. Pixel dan Bitmap. Jumlah bit digunakan untuk mewakili warna/bayangan dari
masing-masing pixel (picture element = pixel). 4 bit/pixel = 24 = 16 level abu-abu.

2.1.4 Pengertian Visual Studio Code

Visual Studio Code adalah aplikasi code editor buatan Microsoft yang dapat
dijalankan di semua perangkat desktop secara gratis. Kelengkapan fitur dan ekstensi
membuat code editor ini menjadi pilihan utama para pengembang. Visual Studio
Code bahkan mendukung hampir semua sistem operasi seperti Windows, Mac OS,
Linux, dan lain sebagainya.

Berdasarkan survey dari Stack Overflow, Visual Studio Code merupakan editor
terpopuler di kalangan developer profesional. Dari 21 aplikasi text editor saingannya,
Visual Studio Code berada di peringkat satu dengan persentase user mencapai
71.07%.
Bukan tanpa alasan, Visual Studio Code dibuat se-ringan dan se-nyaman mungkin
sehingga pengguna tidak terlalu membutuhkan perangkat berspesifikasi tinggi.
Aplikasi ini juga bisa dijalankan untuk membuat atau mengedit kode sumber berbagai
programming language. Sebut saja seperti Node.js, JavaScript, TypeScript, dan masih
banyak lagi.

Selain itu, Visual Studio Code menawarkan ekstensi dan ekosistem yang cukup luas.
Hal ini membuatnya memiliki kompatibilitas tinggi dengan bahasa atau runtime
environment lain, di iantaranya termasuk bahasa pemrograman Python, PHP, .NET,
dan Java.

2.1.5 Jenis-jenis Visual Studio

Visual Studio adalah software yang digunakan untuk menulis sintak ketika membuat
suatu aplikasi. Setidaknya ada empat jenis Visual Studio yang harus kamu ketahui, di
antaranya IDE, App Center, Azure DevOps, dan Visual Studio Code. Untuk
memudahkan pemahamanmu, simak ulasannya di bawah ini:

Visual Studio IDE – Software ini digunakan untuk membuat aplikasi secara cepat
dengan komponen penyelesaian kode baik sebagai source level maupun machine
level. Visual Studio IDE biasanya dipakai oleh programmer individu, kelompok, atau
perusahaan IT yang proyek pembuatan programnya dibangun dari awal sampai di-
publish.

Visual Studio App Center – Software ini lebih mengarah ke otomatisasi life cycle
aplikasi-aplikasi yang berjalan di beberapa operating system seperti iOS, android,
Windows, dan Mac.

Azure DevOps – Sebagai evolusi dari Visual Studio Team Service (VSTS), Azure
DevOps memudahkan pengguna ketika membangun aplikasi. Terdapat sejumlah
fasilitas pendukung guna mengoptimalkan proyek. Misalnya, Azure Boards untuk
perencanaan, Azure Repos untuk manajemen file, Azure Test Plan untuk uji aplikasi,
dan sebagainya.

Visual Studio Code – Sebelumnya Dewaweb sudah menjelaskan software ini cukup
jelas. Sederhananya, Visual Studio Code adalah code editor open-source (gratis) yang
bisa dijalankan di berbagai sistem operasi untuk membangun aplikasi.

2.1.6 Pengertian HTML 5

HyperText Markup Language (HTML) adalah suatu spesifikasi atau standard yang
dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard
HTML. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk
multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten
dimengerti oleh komputer dan perangkat (web browser, parser, dll). HTML5
dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM
Level 2 HTML juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan
website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application
Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009
untuk menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas.
Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin
3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-
plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah
halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web
Internet dan formating hypertext sederhana yang ditulis kedalam berkas format
ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain,
berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam
format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan
dan percetakan yang disebut dengan SGML (Standard Generalized Markup
Language),HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web. HTML saat ini merupakan standar Internetyang
didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium
(W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika
mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika
energi tinggi di Jenewa).

Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali
setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian
mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-
perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah
bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya
ini sebagai Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen
yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang
menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen.
ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu
SGML ( Standard Generalized Markup Language ).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk
pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan
ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk
menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web.
Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang
XHTMLyang merupakan pengembangan dari HTML.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi
dari Waring Wera Wanua, sebuah teknologi inti dariInternet. HTML5 adalah revisi
kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi
keempatnya, HTML4, pada tahun1997) dan hingga bulan Juni 2011 masih dalam
pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki
teknologiHTMLagar mendukung teknologi multimedia terbaru, mudah dibaca oleh
manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua(World Wide
Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang
dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas
pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan
diimplementasikan secara berbeda-beda oleh banyak perangkat lunak] pembuat web.

HTML5 adalah versi revisi ke lima dari kakak pendahulunya, HTML dan HTML4.
Banyak fitur tambahan yang ada di HTML5 membuat para programmer web
semangat untuk mempelajarinya.

2.1.5 Sejarah HTML 5

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis
halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen
teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya
adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada
suatu sistem operasi tertentu.
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML
mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti
akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.
Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF
(Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari
HTML+ (1993).

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah
usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada
tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada
bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara
resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari
HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).

Awal mulanya sebenarnya Sejarah HTML atau Hypertext Markup Language telah
menjadi teknologi utama untuk Web sejak awal tahun 1990-an. Tim Berners-Lee
menciptakan HTML pada tahun 1989 sebagai cara sederhana namun efektif untuk
mengkodekan dokumen elektronik. Bahkan, tujuan awal dari web browser adalah
untuk melayani sebagai pembaca untuk dokumen berformat HTML. Dua dekade
kemudian, browser itu sendiri telah menjadi sebuah portal ke dunia media online. Itu
sebabnya HTML5 tidak hanya sebagai revisi HTML, tetapi juga sebagai standar yang
komprehensif untuk bagaimana halaman web bekerja.

Pada tahun 1994, HTML masih dalam revisi pertama, Mosaic dan Netscape
mendominasi pasar browser, dan kebanyakan orang belum familiar dengan istilah
World Wide Web. Tahun itu, pencipta HTML Berners-Lee memimpin kelompok
untuk membuat Web standar yang dikenal sebagai World Wide Web Consortium
(W3C).
Meskipun W3C adalah kewenangan standarisasi yang diakui saat ini, para pemain
komersial di pasar browser 1990 mengabaikan standar-standar ini dan merintis jalan
mereka sendiri. Pada tahun 1995, W3C menerbitkan revisi kedua dari standar HTML,
dan Web pendatang baru Microsoft menjadi platform browser Internet Explorer (IE).

Selama perang browser awal, para pengembang Web ditantang untuk menjaga situs
mereka selalu kompatibel dengan setiap rilis baru dari browser utama. Meskipun
W3C telah menerbitkan HTML 3.2 pada tahun 1997, diikuti dengan HTML 4 tahun
1998, mengikuti standar sepertinya kurang penting dibandingkan menjaga fitur
browser yang disajikan pengembang. Hal ini berlangsung hingga tahun 2003 ketika
komunitas berbasis Mozilla Foundation mematahkan tren. Setelah dibebaskan
Browser Mozilla asli, yang diikuti oleh browser Firefox pada tahun 2004, Mozilla
cepat mendominasi dibandingkan IE.

Sementara Mozilla Firefox terus berkembang menggunakan HTML 4 standar,

Mozilla bergabung dengan Apple dan Opera pada tahun 2004 untuk membentuk
kelompok yang disebut Web Hypertext Application Technology Working Group
(WHATWG). Tujuan dari WHATWG adalah untuk menjaga perkembangan siklus
HTML. WHATWG dan W3C mengkombinasikan spesifikasi yang ada untuk HTML
dan XHTML untuk dikembangkan lebih lanjut dengan spesifikasi HTML 5 baru.

2.1.6 HTML5 Canvas

Elemen kanvas adalah segi dari HTML5 dan memungkinkan kepada dinamis, skrip
render bentuk 2D dan gambar bitmap. Ini adalah tingkat rendah, model prosedural
yang update bitmap dan tidak memiliki grafik adegan built-in.

Sejarah

Canvas permulaannya diperkenalkan oleh Apple kepada digunakan dalam komponen

sendiri OS Mac X WebKit pada tahun 2004,[1] menggerakkan aplikasi seperti widget
Dashboard dan browser Safari. Kemudian, pada tahun 2005 itu diadopsi dalam versi
1,8 browser Gecko,[2] dan Opera pada tahun 2006,[3] dan standar oleh Teknologi
Hypertext Aplikasi Web Golongan Kerja (WHATWG) pada spesifikasi yang
diusulkan baru kepada teknologi web generasi selanjutnya.

Penggunaan

Canvas terdiri dari suatu kawasan mampu ditarik diartikan dalam kode HTML
dengan atribut tinggi dan atribut lebar. Kode JavaScript mampu mengakses kawasan
melewati set komplit menggambar fungsi yang sama dengan lainnyanya API 2D
umum, sehingga memungkinkan kepada grafis yang dihasilkan secara dinamis.
Beberapa penggunaan diantisipasi canvas meliputi grafik kontruksi, animasi, game,
dan komposisi gambar.

Image Data

Antarmuka ImageData mewakili data piksel yang mendasari area elemen <canvas>.

Itu dibuat menggunakan ImageData() metode konstruktor atau pencipta pada

CanvasRenderingContext2D objek yang terkait dengan kanvas: createImageData()
dan getImageData(). Itu juga dapat digunakan untuk mengatur bagian dari kanvas
dengan menggunakan putImageData().

2.2 Penerapan

Berikut adalah penjelasan langkah-langkah dalam kode tersebut:

1. Membuat Template HTML

 Kode ini sangat membutuhkan saat memulai program HTML
2. Membuat Elemen Canvas

Canvas ini berguna saat kita kasih gambar dan warna. Dan memberikan width
= 400 dan height = 400.
3. Buat Script dan Variabel

Bikin Var (Variabel) “canvasKita”. Fungsi dari ‘querySelector()’ kita

menerima sebuah string yang isinya sebuah kalimat yang isinya sebuah
 selector, selector ini sama dengan yang kita pakai di css. Dan selector yang
kita pakai adalah “canvas1”.
Lanjut, bikin var ctx (Konteks) ctx = canvasKita.getContext("2d"); , didalam
“2d” kita akan membuat grafik didalam canvas kita 2 dimensi. Dan bikin var
imageDataSaya =
ctx.getImageData(0,0,canvasKita.width,canvasKita.height);,
“0,0,canvasKita.width,canvasKita.height” ini Mencakup semua canvas kita.
4. Membuat Titik

Membuat X dan Y dimasing masing 100, dan membuat index. Index = 4 * (x

+(y * canvasKita.width));.
imageDataSaya.data[index] itu ‘.data’ termasuk ke dalam array, dan [index,
+1,+2,+3] itu menampilkan R,G,B,A.
ctx.putImageData(imageDataSaya,0,0); ini menampilkan hasil yang ada nanti
di canvas kita
5. Hasil Titik
 Dan ini hasil output dari code di atas

6. Membuat Titik Menjadi Garis

Bikin function gbr_titik(imageDataTemp,x,y,r,g,b) itu masuk ke dalam array

dan diubah sesuai fungsinya ke index.
7. Perintah Perulangan
 Dibikin perulangan pada for (i =0;i<100;i++) dan Masukan function “gbr_titik
(imageDataSaya, 100+i,100,255,0,0)”
8. Hasil Garis

Dan ini hasil output dari code di atas

9. Membuat Titik Menjadi Persegi

Bikin perulang didalam perulangan garis dengan cara “for (j = 0;j<100;j++)

10. Hasil Persegi
 Dan ini hasil output dari code di atas

BAB 3

PENUTUP

3.1 Kesimpulan

Penggunaan teknologi komputer grafik dalam konteks ini mengacu pada penggunaan
algoritma atau metode komputer grafik untuk membuat objek atau representasi visual.
Membuat Titik, Fokus utama penerapan komputer grafik dalam judul ini adalah
menciptakan titik. Titik adalah objek dasar dalam komputer grafik yang digunakan
sebagai elemen dasar dalam membuat gambar atau representasi visual lainnya.

Visual Studio Code adalah lingkungan pengembangan terintegrasi (IDE) yang

populer dan serbaguna. Dalam konteks ini, Visual Studio Code digunakan sebagai
platform pengembangan untuk mengimplementasikan algoritma komputer grafik
dalam pembuatan titik.

HTML5 Canvas merupakan elemen yang kuat dan fleksibel dalam membuat grafis
interaktif di halaman web. Dengan menggunakan bahasa pemrograman JavaScript,
kita dapat menggambar bentuk, mengatur warna, menganimasikan elemen, dan
mengolah gambar di dalam Canvas.