ThreeJS Canvas Texture returns the entire canvas with the drawing inside of it instead of just the drawing

Question

I am using react, three js, react-three-fiber

I want to place 10 points on the scene, the points are to be circles. I was able to place the points but by default they are squares.

I tried to draw a circle inside of a canvas and use that as a texture for the points but instead the point textures are now squares with circles in them:

// Texture for Points
    const getTexture = (size, color) => {
        var matCanvas = document.createElement('canvas');
        matCanvas.width = size;
        matCanvas.height = size;
        var matContext = matCanvas.getContext('2d');

        // create texture object from canvas.
        var texture = new THREE.Texture(matCanvas);

        // Draw a circle
        var center = size / 2;
        matContext.beginPath();
        matContext.arc(center, center, size/2, 0, 2 * Math.PI, false);
        matContext.closePath();
        matContext.fillStyle = color;
        matContext.fill();

        // need to set needsUpdate
        texture.needsUpdate = true;

        // return a texture made from the canvas
        return texture;
    }

And

return (
        <points args={[geometry]}>
            <pointsMaterial
                size={1}
                map={getTexture(100, 'red')}
            />
        </points>
    )