Image on a grid

Visualising an enlarged image as blocks on a grid. Gray scale image is shown.

Loading an image with canvas is a bit tricky. We must make sure that the image is loaded before doing something. The trick is to create onload method for the image object to read the image data using canvas context object.

From the onload method, it calls a callback function with the argument of the loaded image data. The callback then draws rectangular grid where each cell fills a color of a pixel intensity value.

---

Back to index