I don't really understand about OpenGL ES yet. I've only learn about drawing triangles and so . I've yet to learn about texture.
I heard that in some devices an image with width or height to be the power of 2, ex : 2, 4, 8, 16, 32 etc is necessary. why is it? and what should I do if I have image that the size is lets say 53 x 76?
I need to know this, because this is what kept me from switching from canvas to OpenGL ES. thank you :)
A texture having a power-of-2 greatly simplifies the texturing hardware and makes room for many optimizations to make it faster. If you have a non-power-of-2 texture, you have two options:
1) Fill out the "extra" space with whatever you want (I would pick a color like bright-green so that if you see that color on-screen, you know you've done something wrong with the texcoords), in your example it would be 64x128, and adjust your texture coordinates to compensate. I.e. your texcoords would now go from (0, 0) to (53.0/64.0, 76.0/128.0).
2) Stretch your texture to the nearest power-of-2, again 64x128 in your example, and just use your existing texcoords as-is.