HTML üzerinden hep çizime odaklı çalışmalar yapmamıştım. Yani çizimlerle uğraşmaya pek o kadar da merakım yoktu desem daha doğru sayılır.
Resim veya blog için düzenlediğim resimleri genelde paint3d üzerinden kurcalayarak işlerimi daha hızlı ve kolay bir şekilde halledebiliyordum. Paint3d üzerindeki kalem çeşitleri, 0–255 rgb zengin renkleri ve geometrik şekilleri bulunduruyordu. Acaba buna benzer bir programlama yapabilir miydim diye düşündüm. Github içindeki projelere baktım ve çoğu Javascript ve C# dili ile yapılmış projeler gördüm. Ben de düşündüm de neden Canvas kullanmayayım.
İlk önce VSCode açtım ve örnek bir tasarımdan başladım. Temel tasarımını Bootstrap ve hafif CSS ile oluşturdum.
Bootstrap sayesinde tasarımını neredeyse 20 dk sürdü. Daha güzel eklentiler oluşturabilirdim ama ilk önce çalışıp çalışamadığını kontrol etmek istedim.
Şimdi bunu dinamikleştirebilmek için yani çizim araçlarının çalışabilmesi için Javascript kodlamaya başladım.
İlk önce HTML sayfasında eklediğimiz araçların ve Canvas penceresinin, Javascript alanında çağırmaya çalışalım. Normalde “var” yerine “const“ değişkeni kullanabilirdim. Çünkü güvenlik açısından veya kod açıklığını bir şekilde aza indirgeyebilmek için const değişkenini kullanmanın daha mantıklı olabildiğini söyleyebilirim. Ama herkesin anlayabilmesi için ortak bir değişken türü olan “var” değişkeni kullandım. Kod geliştirmek isteyenler bunu var yerine const kullanarak da çalışmalarına devam edebilirler. Bu arada ikinci değişkende Canvas ’ın bir özelliği olan “2d” çağırmamız gerekiyor. Eğer onu çağırmazsak çizim yapamayız veya Canvas üzerinde herhangi bir işlem yapamayız. Bu kısmını dikkate alarak işlemlerimize devam edelim.
En sonda “color” değişkeni eklediğim özellik, pencerenin ilk açılışında ilk temel bir renkte başlayabilmesi için ekrandaki, “.selected” sınıfı kullanan etiketi çağırdım çağırdım.
Şimdi de çizim gerçekleştirebilmesi için farenin tıklanma(“mousedown”) ve tıklandığı anda kalemin karalayabilecek alana kadar sürüklenebilmesi mantığını düşünmek gerek. Fare tıklanmadığında kalem çizim yapılmaması için “mousedown= false” yapmamız gerekiyor ki işlem dışı haline gelebilsin. Konuyu fazla uzatmadan bir sonraki adımına bakalım.
İlk fonksiyonda btncolor etiketin rengi değiştirdim ve tekrardan arayüzde bulunan HTML “.selected” sınıfını kullanan etiketi çağırdım.
Diğer fonksiyon çizim yaptığımız bölgenin tamamını temizlemek için bir özellik aktif ettim.
Ve son olarak çizdiğimiz resmin masaüstünde kaydetmek için bir özellik eklemek istedim. Bu projeyi çalıştırmak isteyenler veya geliştirmek isteyenler için Github linkimi paylaşıyorum.
