html 5 canvas optimize redrawing

I have only one canvas, that has two "virtual" layers, that I can move (not canvases, but rectangles: green, brown)

What I want to achieve is a possibility to draw on "green" layer, and that it doesn't affect "brown" layer.

Now I'm adding brush tool to my editor, while using brush I save all the coordinates in array. And redraw canvas after new coordinates are added.

The reason I'm doing this - is because, I want to draw the line underneath brown layer. So, as far as I understand, redrawing has to work like this: I redraw green layer, I redraw brush, I redraw brown layer (so it looks, like brown layer is covering everything else) correct me if I'm wrong

Array looks like this:

[
{
    "lastPoint": {
        "x": 692,
        "y": 212
    },
    "currentPoint": {
        "x": 692,
        "y": 214
    }
},
{
    "lastPoint": {
        "x": 692,
        "y": 214
    },
    "currentPoint": {
        "x": 690,
        "y": 219
    }
}

...

]

But after saving new coordinates to array, I do redraw of the canvas and it's getting worse (freezing) as I add more coordinates to array

My question on you is: how can I optimize this redraw on fly feature

Codepen: https://codepen.io/IGentlich/pen/ZEyqqeJ

Steps to reproduce:

1. File -> New
2. Create New Layer
3. Create New Layer
4. Select Layer 3 -> Move
5. Select Layer 2 -> Move
6. Select Layer (2 or 3) -> use Brush

from Recent Questions - Stack Overflow https://ift.tt/3kGft97
https://ift.tt/3CIL2oX