Canvas elementinin HTML5 için çok kullanışlı bir element olduğunu söyleyebilirim. JavaScript ile birleştiği takdirde büyük projelerin gerçekleştirilebileceği, oyunların dahi daha rahat bir şekilde yapılabileceği bir element.
Bugün Canvas elementi ile ilgili butona tıklandığı zaman Canvas’daki resmin siyah-beyaz formata dönüştürüldüğü bir örnek yapmaya çalıştım. Tabii bunu yapmam için JavaScript’i kullanmam gerektiğini de biliyordum. Öncelikle HTML kısmında Canvas elementini oluşturmam gerekiyordu. Bunun için;
Id=”myCanvas” olan genişliğini ve yüksekliğini belirttiğim bir alan oluşturdum. Daha sonra butonumu oluşturarak, tıkla adında bir metot yaratarak tıklandığı zaman o metodu çağırmasını sağladım.
Fonksiyonum ilk başta önceden ayarladığım resmi değişkene atarak onun üzerinden işlem yapmamı sağlayacak.
Imagetogray metodunu çağırarak internet üzerinden araştırdığım resmi siyah-beyaz formata çeviren matematiksel formülü uygulayarak resmi istediğim gibi yapmamı sağladım. Ve web tarayıcısı ile çalıştırdığım zaman şu sonucu aldım.
Belki bunu başka yöntemle yapmak istesem yüzlerce satır komut yazmam gerekebilirdi. Fakat JavaScript+HTML5 benim işlemlerimi kısaltarak daha hızlı sonuç almamı sağladı.