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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The algorithm shouldn’t be difficult:
Divide the canvas area into a 100x100 grid
Every time a mouse event occurs, determine which grid the mouse is in
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.