How to apply one canvas script to multiple page elements?

Question

css

For example, there is a script for canvas. There is one element (canvas), but we need to make more of them on the page. The essence of the script is the same, but with different parameters and is applied to other elements. Here are the sketches - codepen.io/zey_ser/pen/RPXovp
The main question is: is this even possible in theory? That is, with some changes, but in principle is it real?
I don't want to create 6 separate canvases and rewrite the script for each one. I would like to get the most flexible code.
PS I'm in the process of learning both canvas and JS. I ask you not to judge strictly, but to paint your decisions as for a student.
PPS I would be glad to see advice with other principles for implementing the main idea. Maybe SVG, CSS3... Maybe it will be easier with them.

Answer 1

make function . wrap code in it. the function will take the changed parameters .just call your function 10 times with different parameters function may (
left, right, top, bottom, something else) {
your code
} May 15, 20, 12, 31, etc. (12, 25, 12, 15, etc.) May (10, 2, 2, 35, etc.)