HTML5 Webpage Layout

LAYOUTING

Saya akan memberikan contoh dan deskripsi sederhana dari Layouting HTML5, adapun nantinya fokus pada DOCTYPE bersama dengan CSS dan header, hgroup, nav, samping, bagian, artikel, dan elemen footer.

<! doctype html>

Sebagaimana kita tau pada DOCTYPE Deklarasi kita menemukan bahwa ada variasi yang berbeda dari deklarasi DOCTYPE. Untuk tutorial ini kita akan menggunakan DOCTYPE HTML5, yang telah dipecah menjadi bare bone, dan harus selalu menjadi hal pertama untuk disertakan di bagian paling atas dari halaman web.

CSS

Penulisan CSS dalam HTML5 dituliskan dalam bentuk blok misalnya: header, hgroup, nav, section, article, aside, footer {display: block;},ini dilakukan sehingga browser tahu bahwa elemen HTML5 harus diberikan sebagai blok secara default. Ketika styling elemen HTML5  belum pernah menggunakan awalan id (#) atau awalan kelas (.) Itu tidak diperlukan lagi untuk unsur-unsur tertentu, Anda mungkin ingin menambahkan styling ekstra dan dalam hal ini Anda dapat menambahkan id atau kelas dalam tag dengan cara yang biasa yaitu. <class header = "random">.

   

<style>
/*general style*/
    header, hgroup, nav, section, article, aside, footer {display: block;}
/*header area*/
    header {height: 100px; background: #00C;}
    hgroup h1 {color: #FFF; padding: 22px 0 0 20px;}
/*nav area*/
    nav {width: 400px; height: 20px; background:#C66; margin-left: 200px;}
/*section area*/
    section {width:400px; background: #CCC; margin-top: -20px;}
    article {width:400px; background: #CCC;}
/*aside area*/
    aside {width:200px; height: 605px; background: #666; float:right; margin-top: -1px;}
/*footer area*/
    footer {height: 40px; background: #09F; margin-top: -16px;}
    </style>

<header>

 <heading>

Unsur header dapat digunakan dalam dua cara, dapat digunakan sebagai halaman web sundulan yang dilihat di bagian atas seluruh halaman atau dapat digunakan pada awal bagian. Anda biasanya akan melihat elemen ini digunakan sebagai wadah untuk judul atau subjudul menggunakan elemen h1-h6, namun unsur ini bisa berisi lebih dari sekedar bagian heading, dalam hal ini saya akan menambahkan elemen hgroup dan nav.

 <header>

            <hgroup>

                <h1>Test Site</h1>

            </hgroup>

            

            <nav>

                <ul>

                    <li><a href="">item 1</a></li>

                    <li><a href="">item 2</a></li>

                </ul>

            </nav>

        </header>

- See more at: http://www.jonwelshdesigns.co/html/html5-layout/#sthash.y6hWAELv.dpuf

 <header>

            <hgroup>

                <h1>Test Site</h1>

            </hgroup>

            

            <nav>

                <ul>

                    <li><a href="">item 1</a></li>

                    <li><a href="">item 2</a></li>

                </ul>

            </nav>

        </header>

- See more at: http://www.jonwelshdesigns.co/html/html5-layout/#sthash.y6hWAELv.dpuf

<hgroup>

Unsur hgroup merupakan judul bagian dan terutama digunakan dengan judul atau sub-judul. Unsur-unsur utama Anda akan melihat di daerah ini merupakan elemen h1-h6.UPDATE: Pada April tahun 2013 tag hgroup telah diklasifikasikan sebagai usang dan tidak akan didukung, oleh W3C, dalam hal ini dan versi lebih lanjut dari HTML5

 

<nav>

Unsur nav adalah di mana link navigasi menu yang digunakan untuk link di situs anda. Tidak semua link harus berada dalam satu set elemen nav, hanya yang paling penting.

 <header>

            <hgroup>

                <h1>Test Site</h1>

            </hgroup>

            

            <nav>

                <ul>

                    <li><a href="">item 1</a></li>

                    <li><a href="">item 2</a></li>

                </ul>

            </nav>

        </header>

- See more at: http://www.jonwelshdesigns.co/html/html5-layout/#sthash.y6hWAELv.dpuf

 <header>

            <hgroup>

                <h1>Test Site</h1>

            </hgroup>

            

            <nav>

                <ul>

                    <li><a href="">item 1</a></li>

                    <li><a href="">item 2</a></li>

                </ul>

            </nav>

        </header>

- See more at: http://www.jonwelshdesigns.co/html/html5-layout/#sthash.y6hWAELv.dpuf

 <header>

            <hgroup>

                <h1>Test Site</h1>

            </hgroup>

            

            <nav>

                <ul>

                    <li><a href="">item 1</a></li>

                    <li><a href="">item 2</a></li>

                </ul>

            </nav>

        </header>

- See more at: http://www.jonwelshdesigns.co/html/html5-layout/#sthash.y6hWAELv.dpuf

<aside>

<aside> merupakan bagian yang berhubungan dengan halaman web tetapi tidak secara langsung berhubungan dengan konten utama. Ini adalah artikel yang berbeda sepanjang sisi konten utama, itu bisa digolongkan sebagai sidebar di situs blogging / WordPress tertentu.

  

<section>

Sebuah <section> mendefinisikan area yang berbeda dari sebuah halaman web. Hal ini digunakan untuk konten grup dengan header dan tergantung pada preferensi Anda. Contoh ini bisa menjadi bab dalam sebuah buku. Misalnya, 'tentang saya' halaman saya dibagi ke dalam tiga wilayah utama informasi, saya memiliki biografi utama yang merupakan salah satu bagian, yang lain adalah keterampilan saya dan yang terakhir adalah informasi lainnya. Semua bagian ini memiliki header dengan judul, sebuah artikel untuk konten utama dan footer hanya untuk menyelesaikan daerah itu.

 

 

 <footer>

Seperti elemen header ini juga dapat digunakan dalam dua cara. Hal ini dapat digunakan sebagai footer dari seluruh halaman atau dapat digunakan sebagai footer dari bagian terpisah dalam halaman.

 

 

<article>

Elemen ini digunakan pengguna dalam sebuah body. Hal ini biasanya terkandung dalam elemen <section>, tetapi tidak berarti yang diperlukan untuk bekerja dengan baik. Artikel ini dapat digunakan untuk banyak hal termasuk komentar pengguna atau bagian dari posting forum.

Continue lendo

HTML5 Forms Demo

Demo Implementation

Taqaballahu minna waminkum, minal aidzin walfaidzin, mohon maaf lahir batin.

Mari kembali belajar, belajar, dan belajar. Saya akan menberikan contoh komplit sebuah forms html5, lengkap dengan penggunaan atribute dan input type. Berikut script-nya :

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Forms Complete Example</title>
    <style type="text/css">
body {
    margin: 2em 5em;
    font-family:Georgia, "Times New Roman", Times, serif;
}
h1, legend {
    font-family:Arial, Helvetica, sans-serif;
}
label, input, select {
    display:block;
}
input, select {
    margin-bottom: 1em;
}
fieldset {
    margin-bottom: 2em;
    padding: 1em;
}
fieldset fieldset {
    margin-top: 1em;
    margin-bottom: 1em;
}
input[type="checkbox"] {
    display:inline;
}
.range {
    margin-bottom:1em;
}   
.card-type input, .card-type label {
    display:inline-block;
}
    </style>   
</head>
<body>
<form id="register">
<h1>Register Form</h1>
  <fieldset>
    <legend>Personal details</legend>
    <div>
        <label>First Name
        <input id="given-name" name="given-name" type="text" placeholder="First name only" required autofocus>
        </label>
    </div>
    <div>
        <label>Last Name
        <input id="family-name" name="family-name" type="text" placeholder="Last name only" required autofocus>
        </label>
    </div>
    <div>
        <label>Date of Birth
        <input id="dob" name="dob" type="date" required>
        </label>
    </div>
    <div>
        <label>Email
        <input id="email" name="email" type="email" placeholder="example@domain.com" required>
        </label>
    </div>
    <div>
        <label>URL
        <input id="url" name="url" type="url" placeholder="http://mysite.com">
        </label>
    </div>   
    <div>
        <label>Telephone
        <input id="phone" name="phone" type="tel" placeholder="Eg. +447000 000000" required>
        </label>
    </div>
    <div>
        <label>Shoesize
        <input id="shoes" name="shoes" type="number" min="5" max="18" step="0.5" value="9">
        </label>
    </div>
    <div>
        <label>Flying Skill level (1 low - 100 high)
        <input id="skill" name="skill" type="range" min="1" max="100" value="0">
        <output name="output" onforminput="value=a.value">0</output>
        </label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Billing address</legend>
    <div>
        <label>Address
        <textarea id="address" name="address" rows=5 required></textarea>
        </label>
    </div>
    <div>
        <label>Post code
        <input id="postCode" name="postCode" type="text" required>
        </label>
    </div>
    <div>
        <label>Country
        <input id="country" name="country" list="country-names" type="text" required>
        <datalist id="country-names">
            <option label="England" value="England"></option>
            <option label="Northern Ireland" value="Northern Ireland"></option>
            <option label="Ireland" value="Ireland"></option>
            <option label="Scotland" value="Scotland"></option>
            <option label="Wales" value="Wales"></option>
        </datalist>
        </label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Card details</legend>
    <fieldset>
      <legend>Card type</legend>
      <div class="card-type">
          <input id="visa" name="cardtype" type="radio">
          <label for="visa">VISA</label>
          <input id="mastercard" name="cardtype" type="radio">
          <label for="mastercard">Mastercard</label>
          <input id="amex" name="cardtype" type="radio">
          <label for="amex">AMEX</label>
      </div>
    </fieldset>
    <div>
        <label>Name
        <input id="cardName" name="cardName" type="text" placeholder="Name as it appears on your card" required>
        </label> 
    </div>
    <div>
        <label>Card number
        <input id="cardNo" name="cardNo" type="number" required title="The sixteen digit number across the middle of your card.">
        </label>
    </div>
    <div>
        <label>Security code
        <input id="security" name="security" type="number" required pattern="[0-9]{3}" title="The last three digits on the back of your card.">
        </label>
    </div>
    <div>
        <label>Expiry Date
        <input id="expiry" name="expiry" type="month">
        </label>
    </div>
  </fieldset>
  <fieldset>
      <div>
        <button type=submit>Place Order</button>
    </div>
  </fieldset>
</form>
</body>
</html>

Register Form

Personal details

First Name

Last Name

Date of Birth

Email

URL

Telephone

Shoesize

Flying Skill level (1 low - 100 high)

0

Billing address

Address

Post code

Country

Card details

Card type

VISA Mastercard AMEX

Name

Card number

Security code

Expiry Date

Continue lendo

NodeJS

Bermain dengan NodeJS

Halo, kali ini saya akan membahas, bermain, sekaligus belajar NodeJS. Nah, pertanyaanya, apa itu NodeJS?

Node.js, inilah nama bahasa pemprograman berbasis javascript yang mampu berjalan disisi server, Kenapa harus JS? karena JS memiliki kehandalan di sisi eventing dan callback. Intinya adalah, dengan hanya coding satu source, bisa menjalankan banyak sekali perintah secara paralel , itu bisa terjadi karena berbasis event dan callback tadi.

Node.js juga sebuah platform yang dibangun di Chrome JavaScript runtime, digunakan  untuk memudahkan dan membangun jaringan aplikasi yang bersekala dan cepat. Node.js menggunakan event-driven, non-blocking I/O model yang membuatnya ringan dan efisien, cocok untuk data-intensif dan aplikasi real-time yang berjalan di perangkat terdistribusi.

Perbedaan terbesar antara PHP dan nodejs adalah bahwa PHP adalah bahasa memblokir, mengandalkan API yang tidak dikembalikan sampai mereka selesai dijalankan, dan node.js adalah bahasa nonblocking, bergantung pada API yang menggunakan peristiwa dan callback ketika mereka selesai dijalankan.

Namun mereka juga memiliki kesamaan. Keduanya menggunakan notasi braket ({}) untuk blok kode, seperti bahasa pemrograman C. Keduanya memiliki kata kunci fungsi, dengan tujuan yang sama persis dan memiliki sintaks yang sama persis di kedua bahasa.

Untuk menjalankan website kita di browsher, apabila kita menggunakan NodeJS maka kita tidak memerlukan Apache, karena itu NodeJS dibuat.

Untuk cara install NodeJS sudah di posting yaa di Hello MontageJS :D

 Ya, namanya juga belajar, berarti yang sederhana dulu, takutnya kalau sudah "complicated" gitu yang ada jadinya "fatal error". Maksudnya gini, sekarang harus bisa menampilkan "Hello World" terlebih dahulu ._.v

First code "Hello World"
Setelah kita sukses menginstall nodeJS mari kita mencoba node interface dengan mengetik $ node pada terminal anda.
biasanya yang udah bisa javascript pasti langsung was wus wes srepet gitu :))

Sebagai contohnya kita bisa gunakan printah

> console.log("Hello World")

perintah tersebut bertujuan untuk mengirim output ke logging console apa string yang telah di buat.

Menulis program node.js yang sederhana seperti membuat file baru dengan ekstensi 'Js'. Misalnya, buat file sederhana 'hello_world.js' dengan konten berikut:

console.log ('Hello World');

Setelah itu simpan file, dan jalankan dari terminal seperti:

Hello.js $ node
Hello World
 
Server hello world http

Setelah itu, mari ke langkah berikutnya dan menulis sebuah program yang merespon hello world via http.  Kita akan memanggil file 'hello_http.js' dan menempatkan kode berikut ke dalamnya:

var http = require ('http');

var Server = http.createServer (function (req, res) {
   res.writeHead (200);
   res.end ('Hello Http');
});
server.listen (8080);

Sekarang mari kita menjalankan program ini dari terminal dengan mengetik:

Hello_http.js $ node

Hal pertama yang akan Anda perhatikan adalah bahwa program ini, tidak seperti yang pertama, itu karena program simpul akan selalu berjalan sampai kita yakin bahwa tidak ada kejadian lagi yang mungkin. Dalam hal ini server http terbuka adalah sumber peristiwa yang akan menjaga hal-hal yang terjadi.

Pengujian server yang sederhana seperti membuka tab browser baru, dan navigasi ke url berikut: http: // localhost: 8080 /. Seperti yang diharapkan, Anda akan melihat respon yang berbunyi: 'Hello Http'.

Atau, Anda juga bisa membuka terminal baru dan menggunakan curl untuk menguji server Anda:

$ Keriting localhost: 8080
Hello Http

Sekarang kita lihat lebih detail pada langkah-langkah yang terlibat dalam program yang dijalankan ini. Pada baris pertama, disertakan modul inti http dan menetapkan ke variabel yang disebut http. Selanjutnya kita membuat sebuah variabel yang disebut server dengan memanggil http.createServer. Argumen dilewatkan ke panggilan ini adalah penutupan yang disebut setiap kali permintaan http datang.

Akhirnya kita sebut server.listen (8080) mengatakan node.js port yang kita ingin server untuk menjalankan. Jika ingin berjalan di port 80, program perlu dijalankan sebagai root.

Sekarang ketika kita arahkan browser ke 'localhost: 8080', penutupan koneksi dipanggil dengan req dan objek res. Req adalah aliran dibaca yang memancarkan acara 'data' untuk setiap bagian yang masuk data (seperti pengiriman formulir atau file upload). Obyek res adalah aliran ditulis yang digunakan untuk mengirim data kembali ke klien. Dalam kasus ini, hanya mengirimkan 200 OK header, serta tubuh Hello Http '. 


Sementara sekian dulu yaa, ditunggu tulisan pembelajaran berikutnya ('.')9

Continue lendo

HTML5 Forms

PDKT sama HTML5 Forms

 

Pembahasan kali ini masih tentang HTML5, yaa namanya HTML5 forms berarti tentang pembuatan form seperti yang kita ketahui atau lihat di halaman pendaftaran website, blog dan banyak lagi. Yang beda dari HTML5 Forms itu kita bisa menggunakan semua jenis inputan dan atribute baru yang dapat digunakan untuk mempercantik tampilan form kita di web. Dengan menggunakan ini kita bahkan tidak memerlukan Shivs, hacks, atau workarounds.

Nah, berikut beberapa atribut baru HTML5 Forms yang akan di bahas :

HTML5 form attributes

• Placeholder

  Merupakan petunjuk singkat yang menggambarkan nilai yang diharapkan dari sebuah field input (misalnya nilai sampel atau deskripsi singkat dari format yang diharapkan) dan akan ditampilkan dalam kolom input sebelum pengguna memasukkan sebuah nilai atau inputan. Placeholder bekerja dengan jenis input sebagai berikut : text, search, email, url, password, tel.
  Contoh kode :
  

  <input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">
  
  nih contohnya seperti dibawah ini :D

  
  

• Autofocus
  

  Merupakan atribut boolean. Ketika digunakan, ia menentukan bahwa <input> elemen harus secara otomatis mendapatkan fokus ketika meng-load halaman website tersebut
  Sebelumnya untuk autofokus biasanya menggunakan javascript.
  Contoh kode  :
  

  <input type="text" name="first-name" id="first-name" autofocus>
  
  taraaaa ini hasilnya :

  
  

• Autocomplete

  Merupakan atribut yang membantu pengguna mengisi form berdasarkan inputan sebelumnya. Atribut ini sebenarnya telah ada sejak penggunaan IE 5.5 namun telah di bakukan sebagai HTML5
  Contoh kode :
  <input type="text" name="tracking-code" id="tracking-code" autocomplete="off">
  
  Cara menjalankannya itu modelnya seperti menginputkan username kemudian ketika di submit ternyata gagal, nah pas balik ke halaman input itu username yang diketikkan tadi masih tetap ada
  
  
  

• Required


  Merupakan atribut yang digunakan untuk mengharuskan pengguna untuk memasukkan sebuah nilai dan merupakan atribut boolean
  Contoh kode :
  

  <input type="text" id="given-name" name="given-name" required>

  Nah hasilnya sama seperti gambar utama postingan ini .

• Pattern

  Merupakan atribut yang digunakan untuk validasi khusus seperti kode produk, kode faktur atau lainnya.
  
  Contoh kode :
  

  <label>Product Number:<input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/>
  </label>

  Product Number:
  

• List

  Daftar atribut mengacu pada <datalist> elemen yang berisi telah ditetapkan pilihan untuk <input> elemen.
  Contoh kode :
  

  <label>Your favorite fruit:<datalist id="fruits">
    <select name="fruits">
      <option value="Blackberry">Blackberry</option>
      <option value="Blackcurrant">Blackcurrant</option>
      <option value="Blueberry">Blueberry</option>
      <!-- … -->
    </select>
  If other, please specify:</datalist>
    <input type="text" name="fruit" list="fruits">
  </label>

  Your favorite fruit:

   untuk test klik kolomnya kemudian klik tombol keyboar panah bawah :3

• Novalidate & Formnovalidate

  Atribut novalidate dan formnovalidate menunjukkan bahwa form tidak harus divalidasi ketika diajukan. Mereka berdua atribut Boolean. formnovalidate dapat diterapkan untuk mengirimkan atau jenis input gambar. The novalidate atribut dapat diatur hanya pada bentuk elemen.
  Sebuah contoh kasus penggunaan untuk atribut formnovalidate bisa pada tombol "menyimpan konsep", di mana bentuk memiliki bidang yang diperlukan untuk mengajukan rancangan tetapi tidak diperlukan untuk menyimpan draft. novalidate akan digunakan dalam kasus di mana Anda tidak ingin untuk memvalidasi form tetapi ingin mengambil keuntungan dari lebih berguna perangkat tambahan antarmuka pengguna yang menawarkan jenis masukan baru.
  Contoh berikut menunjukkan cara menggunakan formnovalidate:
  
  

  <form action="process.php">
    <label for="email">Email:</label>
    <input type="text" name="email" value="gordo@example.com">
    <input type="submit" formnovalidate value="Submit">
  </form>

  Dan ini contoh menggunakan novalidate :
  

  <form action="process.php" novalidate>
    <label for="email">Email:</label>
    <input type="text" name="email" value="gordo@example.com">
    <input type="submit" value="Submit">
  </form>

  
  
   Selamat mencoba, semoga bermanfaat ('.')9

Continue lendo

HTML5 Multimedia

HTML <video> Tag

Pada postingan sebelumnya tentang Apa itu HTML5 ? sudah dijelaskan bahwa yang menarik dari HTML5 yaitu support untuk multimedia. Jadi, menambahkan video ke halaman web yang kita buat itu semudah menambahkan gambar. Tidak ada lagi yang dibutuhkan untuk menangani khusus plug-in atau memerlukan markup gila, Anda dapat melakukannya dengan elemen tunggal, sehingga dapat memperbaiki kinerja video dan membuka pintu untuk menciptakan interaksi antara video dan elemen lain pada halaman yang belum mungkin dilakukan sebelumnya.

Menjalankan video dalam sebuah halaman web mungkin tidak tampak begitu istimewa karena sebelumnya kita sudah dapat melihat video pada halaman web dengan plugin seperti Flash Player, Quicktime, dan Silverlight. Namun, ini sebenarnya adalah sebuah langkah maju yang besar untuk standardisasi pemutaran video di browser web dan perangkat. Tujuannya agar di masa depan, pengembang hanya perlu menggunakan salah satu metode untuk embedding video, didasarkan pada standar terbuka (tidak dikontrol oleh satu perusahaan), dan akan bekerja di mana-mana.  

 

HTML5 Video Tags

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in media players

HTML5 Video Tags

Unsur <video> memiliki beberapa atribut khusus yang dapat mengubah atau meningkatkan perilaku default.

Tag	Description
autoplay	Menceritakan browser untuk segera mulai men-download video dan bermain secepat mungkin. Perhatikan bahwa browser mobile umumnya tidak mendukung atribut ini, pengguna harus sentuh layar untuk memulai pemutaran video.
preload	Memberi petunjuk ke browser apakah optimis mengunduh video itu sendiri atau metadata yang dianggap berharga. Pilihannya adalah: none - Petunjuk ke browser bahwa pengguna mungkin tidak akan menonton video, atau yang meminimalkan lalu lintas yang tidak perlu yang diinginkan.  metadata - Petunjuk ke browser bahwa pengguna tidak diharapkan perlu video, tapi itu mengambil metadata (dimensi, frame pertama, daftar lagu, durasi, dan sebagainya) yang diinginkan. auto - Petunjuk ke browser yang optimis men-download seluruh video dianggap diinginkan.
poster	Menyediakan  gambar untuk ditampilkan sebelum video di putar/di jalankan

controls	Menunjukkan kontrol video default (play, pause, dll)
height & width	Mengatur lebar dan tinggi video dalam CSS piksel
loop	Penunjuk browser untuk secara otomatis melakukan pengulangan (diulang)

Muted

mematikan audio pada video

Continue lendo

HTML5 CANVAS

HTML <canvas> Tag

Pembahasan kali ini bukan tentang "next tutorial MontageJS", tapi akan lebih mengenal attribute dari HTML5, salah satunya HTML <canvas> Tag .

Tag <canvas> merupakan fitur atau atribut terbaru yang ditawarkan HTML5 yang digunakan untuk menggambar grafik, dan dapat kita dukung dengan script biasanya Javascript, agar canvas yang kita buat benar-benar bisa menarik/menggambar grafis. Itu disebabkan karena Tag <canvas> hanya merupakan sebuah wadah untuk grafis.

Nah, contoh function script-nya yaitu getContext () method yaitu untul mengembalikan sebuah objek yang menyediakan metode dan properti untuk menggambar di kanvas.

Method ini mencakup sifat-sifat dan mengambil objek 2 dimensi, yang dapat digunakan untuk menggambar teks, garis, kotak, lingkaran, dan banyak lagi - di kanvas. 

Berikut properti yang dapat digunakan bersamaan dengan tag <canvas> :

Colors, Styles, and Shadows

Property	Description
fillStyle	Sets or returns the color, gradient, or pattern used to fill the drawing
strokeStyle	Sets or returns the color, gradient, or pattern used for strokes
shadowColor	Sets or returns the color to use for shadows
shadowBlur	Sets or returns the blur level for shadows
shadowOffsetX	Sets or returns the horizontal distance of the shadow from the shape
shadowOffsetY	Sets or returns the vertical distance of the shadow from the shape

Method	Description
createLinearGradient()	Creates a linear gradient (to use on canvas content)
createPattern()	Repeats a specified element in the specified direction
createRadialGradient()	Creates a radial/circular gradient (to use on canvas content)
addColorStop()	Specifies the colors and stop positions in a gradient object

Line Styles

Property	Description
lineCap	Sets or returns the style of the end caps for a line
lineJoin	Sets or returns the type of corner created, when two lines meet
lineWidth	Sets or returns the current line width
miterLimit	Sets or returns the maximum miter length

Rectangles

Method	Description
rect()	Creates a rectangle
fillRect()	Draws a "filled" rectangle
strokeRect()	Draws a rectangle (no fill)
clearRect()	Clears the specified pixels within a given rectangle

Paths

Method	Description
fill()	Fills the current drawing (path)
stroke()	Actually draws the path you have defined
beginPath()	Begins a path, or resets the current path
moveTo()	Moves the path to the specified point in the canvas, without creating a line
closePath()	Creates a path from the current point back to the starting point
lineTo()	Adds a new point and creates a line from that point to the last specified point in the canvas
clip()	Clips a region of any shape and size from the original canvas
quadraticCurveTo()	Creates a quadratic Bézier curve
bezierCurveTo()	Creates a cubic Bézier curve
arc()	Creates an arc/curve (used to create circles, or parts of circles)
arcTo()	Creates an arc/curve between two tangents
isPointInPath()	Returns true if the specified point is in the current path, otherwise false

Transformations

Method	Description
scale()	Scales the current drawing bigger or smaller
rotate()	Rotates the current drawing
translate()	Remaps the (0,0) position on the canvas
transform()	Replaces the current transformation matrix for the drawing
setTransform()	Resets the current transform to the identity matrix. Then runs transform()

Text

Property	Description
font	Sets or returns the current font properties for text content
textAlign	Sets or returns the current alignment for text content
textBaseline	Sets or returns the current text baseline used when drawing text

Method	Description
fillText()	Draws "filled" text on the canvas
strokeText()	Draws text on the canvas (no fill)
measureText()	Returns an object that contains the width of the specified text

Image Drawing

Method	Description
drawImage()	Draws an image, canvas, or video onto the canvas

Pixel Manipulation

Property	Description
width	Returns the width of an ImageData object
height	Returns the height of an ImageData object
data	Returns an object that contains image data of a specified ImageData object

Method	Description
createImageData()	Creates a new, blank ImageData object
getImageData()	Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
putImageData()	Puts the image data (from a specified ImageData object) back onto the canvas

Compositing

Property	Description
globalAlpha	Sets or returns the current alpha or transparency value of the drawing
globalCompositeOperation	Sets or returns how a new image are drawn onto an existing image

Other

Method	Description
save()	Saves the state of the current context
restore()	Returns previously saved path state and attributes

Dan ini contoh sederhana dari sebuah <canvas> untuk menggambar sebuah persegi :

1.  Buat file .html kemudian ketikkan code seperti berikut :
   
   
   Code:

   <!DOCTYPE html>
   <html>
   <body>
   
   <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
   Your browser does not support the HTML5 canvas tag.
   </canvas>
   
   <script>
   
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.fillStyle = "#FF0000";
   ctx.fillRect(0,0,150,75);
   
   </script>
   
   </body>
   </html>
2. Simpan file.html kemudian jalankan, dan berikut tampilannya :
   
   
   
   
   
   
   
   
   
   
   Dan ini contoh kedua dari sebuah <canvas> untuk menggambar seperti aplikasi paint :
   

   1. Buat file .html baru dan ketikkan code seperti berikut : 
      
      
      Title of Spoiler:

      <!DOCTYPE html>
      <html>
      <body>
      
      <div id="sketch" border=1>
        <canvas id="paint"></canvas>
      </div>
      
      <script>
      var canvas = document.querySelector('#paint');
      var ctx = canvas.getContext('2d');
      
      var sketch = document.querySelector('#sketch');
      var sketch_style = getComputedStyle(sketch);
      canvas.width = parseInt(sketch_style.getPropertyValue('width'));
      canvas.height = parseInt(sketch_style.getPropertyValue('height'));
      var mouse = {x: 0, y: 0};
      
      /* Mouse Capturing Work */
      canvas.addEventListener('mousemove', function(e) {
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
      }, false);
      
      /* Drawing on Paint App */
      ctx.lineWidth = 5;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'blue';
      
      canvas.addEventListener('mousedown', function(e) {
          ctx.beginPath();
          ctx.moveTo(mouse.x, mouse.y);
      
          canvas.addEventListener('mousemove', onPaint, false);
      }, false);
      
      canvas.addEventListener('mouseup', function() {
          canvas.removeEventListener('mousemove', onPaint, false);
      }, false);
      
      var onPaint = function() {
          ctx.lineTo(mouse.x, mouse.y);
          ctx.stroke();
      };
      
      </script>
      
      </body>
      </html>  

       
      
       
      Ini hasilnya hahahaha :3
      

Continue lendo