I have a QR code, but wounded, cannot be seen clearly. I want to put the wounded QR code as a background, and draw a new QR code on top of the background.

I also want to do some test to JavaScript canvas drawing. So I created this blog with interactive drawing functionality. In order to test pure JavaScript, no library is used.


  1. Set rows, columns and grid size of the QR code drawing area.
  2. Browse a image file on local disk, it will show as a background and fit into to canvas with set sizes.
  3. Use left mouse button to draw dark points and right mouse button to clear dark points.
  4. Use Hide/Show button to hide or show background after background selected, respectively, also for further scanning.
  5. Below the drawing area, a textarea is shown to represent the two dimensional data.
  6. Click Set Data button to apply the data in the textarea to the drawing area if sizes match.

Rows: Cols: Grid size: