Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Image watermarks with HTMLCanvas and JavaScript

Comments and suggestions in here

It doesn’t annoy you the fact that after spending hours doing let’s say an illustration, you put it online with the intention of selling it or just share with the world, when suddenly everyone has it without giving you any credit and earnings being lower than what you expected?.

When these kinds of things happen, there are many possible solutions to keep people away from your artworks, some of them more secure than others but every one of them providing a certain level of security. An effective way to protect your images from average users is through watermarks, which is one of the most disturbing things because despite the fact that you can actually grab the image, removing the watermark is really stressful. With Watermark, a great JavaScript library, you can add watermarks to your images to protect them from burglars.


The idea to create Watermark came from an original article from the same author named “How to create transparency in images with canvas”, which studied the main concept behind the creation of watermarks.  The basic steps to construct a watermark are:

  • Add your image into the canvas element.
  • Loop thru the image and set pixel by pixel the alpha value of your choice.
  • Get the canvas’ data URL.


Your watermark doesn’t have to be a .PNG or .GIF file with transparency, because Watermark creates transparency even if you defined a .JPG as your watermark picture. Visiting the official site will grant you access to the complete documentation, free download link and a couple of nice demos plus:

  • Complete code in the main tutorial.
  • Adjustment parameters explained.
  • Logical part explained and easy to understand.

Original link: Watermark

4 Responses to “Image watermarks with HTMLCanvas and JavaScript”

  1. Herve
    March 31st


    The very big problem with this solution is you only have to disable Javascript (with NoScript by example) to get the images without any watermark. So this is not reliable at all…

    • Yep, it isn’t a bulletproof system but as you can read on the site, it can help you prevent average users from stealing your pictures.

  2. cynthia nelson
    December 20th

    Good design on CSS5. I find for web design site. F

Leave a Reply