How to dynamically draw pictures?

Question

WebGL

The goal is to create a tile map whose pictures do not repeat.
Why does drawing one picture erase the previous one?
(if you load everything first and then draw, then all the pictures are drawn, but the goal is to load them when necessary)
https://jsfiddle.net/1vd79h67/2/
What to watch or how to draw only a certain number of tiles from the entire map?
(based on the previous question, I should render whatever is in the buffer)

Answer 1

The idea is to use gl.viewport() to specify the piece of canvas to draw on. Or you can see how they do it in the three.js or verge3d engines.
Here is an example from three.js:
https://threejs.org/examples/?q=webgl_camera_array...