javascript - Help canvas to draw translucent mosaic?

Question

My requirement is to allow users to use the mouse to mosaic the uploaded documents. My idea is to bind mouse events to the canvas and draw a translucent png to the canvas along the user's mouse pressing path. On the certificate, now I don’t want to use translucent PNG overlay, I want to directly use canvas to generate mosaics, please lead the way!

Answer 1

The algorithm shouldn’t be difficult:

1. Divide the canvas area into a 100x100 grid

2. Every time a mouse event occurs, determine which grid the mouse is in

3. Draw the grid directly with fillRect as the average color in the grid (average the rgb of all points in the grid, or directly take the color of a certain point in the grid)

This implements the basic algorithm of superimposed mosaic.