Translate, rotate, draw objek di ctx canvas

Urutannya begini :

ctx.save();

ctx.translate(b_image.width/2,b_image.height/2);

ctx.rotate(jam);

ctx.drawImage(b_image, -b_image.width/2,-b_image.height/2,b_image.width, b_image.height);

ctx.restore();

diantara ctx save dan ctx.restore. letakkan objek

ctx.translate : titik akhir objek

ctx.rotate : besar sudut yang diinginkan

ctx.drawImage : menggambar objek, dengan x dan y di kurang setengah ukuran objek

itulah yang ku mengerti

Naskah, Desain, dan Coding

Karena terbiasa bekerja dalam tim (dahulu ........ kali...), jadi antara naskah, desain, dan coding dibuat terpisah. Harapannya sih ketika di breakdown/dibagikan bisa menjadi 3 orang yang mengerjakan saling melengkapi..

Naskah, adalah ide awal, saat ini dicatat di kepala saja.

Desain, adalah bentuk tampilan yang mungkin dari beberapa kemungkinan. Kali ini saya buatnya menggunakan Coreldraw.

Coding, adalah apa yang dimaksud di dalam Naskah, seperti apa nantinya, dengan menggunakan Desain yang ada. Kalau coding, karena html dan js, saya menggunakan notepad++.

Nah ketiga hal tersebut saling melengkapi.

Kalau gak ada naskah, maka gak ada tujuan.

Kalau gak ada desain, codingnya berat dan sulit.

Kalau gak ada coding, maka gak bisa sesuai tujuan.

kurlebmonmap

Mengubah file png ke base64

Sebelumnya saya menggunakan converter online di https://www.base64-image.de/

Namun saya berpikir, bagaimana jika tidak bisa online, sedangkan kebutuhan convert png ke base64 mendesak?

Akhirnya saya mencoba membuat sendiri menggunakan bahasa javascript dan html.

Jadi deh. Dan saya menggunakannya berkali-kali, sehingga gak ketergantungan online.

Walaupun hanya bisa satu file tiap convert, namun lebih baik ada

dan ternyata di https://www.base64-image.de/ sekarang kok gak bisa (saya coba 10 april 2026).

Nah bagi yang mau menggunakan secara gratis, bisa di blog ini, yukbelajarprogramming.blogspot.com dengan link convertenya https://yukbelajarprogramming.blogspot.com/2026/04/ubah-png-ke-base64.html

cara pertama : insert image, otomatis di convert, trus download hasilnya (file html)

cara kedua : insert image, otomatis di convert, trus tekan ctrl+shift+i, copy paste hasil di kanan layar

demikian

Pengenalan Koding usia dini

Apa mungkin bisa memperkenalkan koding kepada yang berusia masih kecil? Itu pertanyaan yang muncul di kepala saya ketika berseliweran kelas-kelas koding untuk anak di beranda facebook. 

Setelah di cari, ternyata malah diperkenalkan dari usia 3-6 tahun.

Gambarnya seperti apa? Ku cari, diberikan 5 angka dan pasangan warnanya, ada gambar bunga, dimana bagian-bagiannya diberi nomor, dan tugasnya adalah mewarnai sesuai pasangan angka-warna.

Wah, gitu ya.

Akhirnya ku coba buat yang seperti itu. Tapi soal dan kunci jawabannya saja. Untuk mewarnainya perlu di simpan ke pdf dan di print/cetak di kertas dulu. 

Dan sudah jadi 4 tema. Link nya : galihw.github.io/MewarnaiGambar

Silahkan dicoba ya

Ubah png ke base64

Silahkan Pilih 1 File png:


Silahkan Klik untuk dapatkan Hasil Edit (atau Ctrl+Shift+i --> copy):

...

Filter Warna untuk javascript

Gunakan link ini untuk mendapatkan filter warna sesuai keinginan:

https://angel-rs.github.io/css-color-filter-generator/

misal

hijau

filter: brightness(0) saturate(100%) invert(76%) sepia(68%) saturate(7285%) hue-rotate(96deg) brightness(128%) contrast(123%);

biru

filter: brightness(0) saturate(100%) invert(8%) sepia(99%) saturate(7166%) hue-rotate(247deg) brightness(104%) contrast(144%);

merah

filter: brightness(0) saturate(100%) invert(19%) sepia(95%) saturate(7202%) hue-rotate(358deg) brightness(109%) contrast(112%);

bentuk di atas formatnya untuk css

di javascript tinggal hilangkan kata filter

var biru = "brightness(0) saturate(100%) invert(8%) sepia(99%) saturate(7166%) hue-rotate(247deg)"

masukkan di ctx

ctx.filter = biru;

Insert gambar di js - base64

Pada menggambar img di html dengan javascript, daripada pakai file.png, saya lebih cocok pakai image dari base64.

Alasannya, img tersebut include dalam file. Gak ambil dari luar file.

Sehingga, memudahkan penumpukan gambar di canvas yang sama.

Dan selanjutnya, hasilnya bisa di save ke png dengan toDataURL, dan akhirnya bisa dipanggil ke canvas baru agar bisa di cetak menggunakan print()