How to change size of pixel square using createImageData in html canvas?

Question

I need to draw some pixels which gonna be palette colors for my character. I done this but it is too small because it is 1:1. How can I change size of it, to be much bigger without losing quality? I have an array where I am holding data about RGB color about every single pixel. I just want to draw it much bigger, like 4x times bigger. 1 pixel should be square 2x2.

Here is my code:

// palette is an array[256] of objects RGB

function drawPalette(palette) {
    const palWidth = 8;
    const palHeight = 32;
    document.getElementById('palette-canvas').width = palWidth;
    document.getElementById('palette-canvas').height = palHeight;

    var canvas = document.querySelector('#palette-canvas');
    var context = canvas.getContext('2d');

    var image = context.createImageData(canvas.width, canvas.height);
    var data = image.data;

    var x = 0;
    var y = 0;
    palette.rgba.forEach(color => {
        if (y == palHeight) {
            return;
        }
        drawPixel(x, y, color);
        x++;
        if (x == palWidth) {
            x = 0;
            y++;
        }
    });
    swapBuffer();

    function drawPixel(x, y, color) {
        var roundedX = Math.round(x);
        var roundedY = Math.round(y);

        var index = 4 * (canvas.width * roundedY + roundedX);
        data[index + 0] = color.r;
        data[index + 1] = color.g;
        data[index + 2] = color.b;
        data[index + 3] = 255;
    }

    function swapBuffer() {
        context.putImageData(image, 0, 0);
    }
}

This is how its looks like. It is valid but size is 1:1. Look left bottom corner

This is how it should be.