How do I copy AND shrink a canvas onto another?

I have two canvases, one big & one small. I want the small one to mirror the entire big one, but shrunken to fit. I can only get it to mirror the small corner instead of the entire thing. The big canvas will eventually allow drawing and the small will mirror it on change, but for a basic example, see below or this codepen https://codepen.io/b3aver/pen/abRZLKa.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
    var bigCanvas = document.getElementById("bigCanvas")
    var bigContext = bigCanvas.getContext("2d");
    bigContext.fillStyle="red";
    bigContext.fillRect(0, 0, bigCanvas.height, bigCanvas.width);
    bigContext.fillStyle="blue";
    bigContext.fillRect(bigCanvas.height/3, bigCanvas.height/3, bigCanvas.height/3, bigCanvas.width/3);
    bigContext.fillStyle="white";
    bigContext.fillRect(7,7,7,7);

    var smallCanvas = document.getElementById("smallCanvas");
    var smallContext = smallCanvas.getContext("2d");

    function dupe(){
        smallContext.drawImage(bigCanvas,0,0)
    }
</script>
</head>
<body>
    <canvas id="bigCanvas" height="280" width="280"></canvas>
    <canvas id="smallCanvas" height="28" width="28"></canvas>
    <button id="duplciateBtn" onclick="dupe()">Duplicate</button>
</body>
</html>

I’ve played around with the context scale (both big & small) but still can’t get it to cooperate. The closest I’ve gotten is changing the big context scale to (0.1,0.1), drawing on the big canvas & then it shrinks it into the corner. But I want the big canvas to stay big.

3 canvases showing the issue

The left is the big canvas, the top right is what I want, and the bottom right is what I get.