Javascript fillRect на холсте с абсолютным положением внутри относительного контейнера

Question

У меня есть два холста внутри контейнера, как это:

<div class="canvasContainer">
   <canvas class="drawCanvas" style="z-index: 0;"></canvas>
   <canvas class="drawCanvas" height="150" width="300" style="z-index: 1;"></canvas>
</div>

Первый холст (z-index 0) содержит изображение, а второй холст для рисования. Оба холста имеют абсолютную позицию, а canvasContainer имеет относительную позицию, но по какой-то причине функция fillRect в контексте холста не работает, когда я применяю относительное положение к canvasContainer. Когда я удаляю относительное положение, функция fillRect в Javascript работает, но мой холст позиционируется абсолютно как тег body. Почему функция fillRect не работает внутри моего canvasContainer, когда его положение относительно?

Так я рисую на своем холсте

let canvas = document.createElement('canvas');
        canvas.style.zIndex = "0";
        canvas.className = "drawCanvas";
        let context = canvas.getContext("2d");
        img.onload = function() {
            context.drawImage(img, 0, 0);
        }

        canvasContainer.appendChild(canvas);

        let canvas2 = document.createElement('canvas');
        canvas2.className = "drawCanvas";
        canvas2.style.zIndex = "1";
        canvas2.height = canvas.height;
        canvas2.width = canvas.width;
        canvas2.md = false;
        canvas2.addEventListener('mousedown', function(event){
            this.md = true;
        });

        canvas2.addEventListener('mouseup', function(event){
            this.md = false;
        });

        canvas2.addEventListener('mousemove', function(event){
            let mouseX = event.clientX - this.offsetLeft;
            let mouseY = event.clientY - this.offsetTop;

            if(this.md){
                let ctx = this.getContext('2d');
                    ctx.fillStyle = "blue";
                    ctx.fillRect(mouseX, mouseY, 4, 4);
                }
            }
        });

        imageContainer.appendChild(canvas2);



    }