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