Praveen Singh

HTML5 Canvas Image cropper: pan, zoom and crop


HTML5 Canvas Image cropper: pan, zoom and crop

In this article, we will be building a pure client side Image cropper, with absolutely no help from server. We will be using HTML5 Canvas technology to achieve that.

Image cropper can be made in different way, we are going for pan and zoom option here, where you can move the background image, zoom in or out and then crop it.


Video tutorial


  1. Great stuff. Thanks bro. Please how can I upload the cropped image to my server.

  2. Thank you very much, i would like to know how to use it in a server and how to move the image draw in the canvas for saving it in a folder in my website

  3. Uncaught TypeError: Cannot read property 'getContext' of null , got this error.


  4. Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much

    Personal Installment Loans
    Title Car loan
    Cash Advance Loan