How can i add sprites to my raycaster, and various walls textures?

Here’s my RayCast algorythm, not so complicated:

var currentAngle = playerAngle + HALF_FOV;
        var rayStartX = Math.floor(playerX / MAP_SCALE ) * MAP_SCALE;
        var rayStartY = Math.floor(playerY / MAP_SCALE) * MAP_SCALE;
        for(var ray = 0; ray < WIDTH; ray++){
            var currentSin = Math.sin(currentAngle); currentSin = currentSin ? currentSin : 0.000001;
            var currentCos = Math.cos(currentAngle); currentCos = currentCos ? currentCos : 0.000001;      
        
            //vertical collisions
            var rayEndX, rayEndY, rayDirectionX, verticalDepth, textureEndY, textureX;
            if(currentSin > 0) { rayEndX = rayStartX + MAP_SCALE; rayDirectionX = 1}
            else { rayEndX = rayStartX; rayDirectionX = -1}
            for (var offset = 0; offset < MAP_RANGE; offset += MAP_SCALE) {
                verticalDepth = (rayEndX - playerX) / currentSin;
                rayEndY = playerY + verticalDepth * currentCos;
                var mapTargetX = Math.floor(rayEndX / MAP_SCALE);
                var mapTargetY = Math.floor(rayEndY / MAP_SCALE);
                if(currentSin <= 0) mapTargetX += rayDirectionX;
                var targetSquare = mapTargetY * MAP_SIZE + mapTargetX;
                if(targetSquare < 0 || targetSquare > map.length - 1) break;
                if(map[targetSquare] == 1 || map[targetSquare] == 2) { textureY = map[targetSquare]; break;}
                rayEndX += rayDirectionX * MAP_SCALE;
            }
            textureEndY = rayEndY;

            var tempY = rayEndY;
            var tempX = rayEndX;

            
            //horizontal collisions
            var rayEndY, rayEndX, rayDirectionY, horizontalDepth, textureEndX, textureY;
            if(currentCos > 0) { rayEndY = rayStartY + MAP_SCALE; rayDirectionY = 1}
            else { rayEndY = rayStartY; rayDirectionY = -1}
            for (var offset = 0; offset < MAP_RANGE; offset += MAP_SCALE) {
                horizontalDepth = (rayEndY - playerY) / currentCos;
                rayEndX = playerX + horizontalDepth * currentSin;
                var mapTargetX = Math.floor(rayEndX / MAP_SCALE);
                var mapTargetY = Math.floor(rayEndY / MAP_SCALE);
                if(currentCos <= 0) mapTargetY += rayDirectionY;
                var targetSquare = mapTargetY * MAP_SIZE + mapTargetX;
                if(targetSquare < 0 || targetSquare > map.length - 1) break;
                if(map[targetSquare] == 1 || map[targetSquare] == 2) {texturex = map[targetSquare]; break;}
                rayEndY += rayDirectionY * MAP_SCALE;
            }
            textureEndX = rayEndX;
            
            var endX = verticalDepth < horizontalDepth ? tempX : rayEndX;
            var endY = verticalDepth < horizontalDepth ? tempY : rayEndY;


            //3D projection
            var textureImg = verticalDepth < horizontalDepth ? textureY : textureX;
            var depth = verticalDepth < horizontalDepth ? verticalDepth : horizontalDepth;
            var textureOffset = verticalDepth < horizontalDepth ? textureEndY : textureEndX;
            textureOffset = textureOffset - Math.floor(textureOffset / MAP_SCALE) * MAP_SCALE;
            depth *= Math.cos(playerAngle - currentAngle)
            var WallHeight = Math.min(Math.floor(MAP_SCALE * 300 / (depth + 0.001)), 50000);
            context.globalAlpha = 1;
            context.fillStyle = verticalDepth < horizontalDepth ? "#aaa" : '#555';
            context.fillRect( 148 + ray, 46 + ( HEIGHT / 2 - WallHeight / 2), 1, 
            WallHeight); 
            var textureImg = verticalDepth < horizontalDepth ? textureY : textureX;
            //textures
            context.drawImage(
                WALLS[0],
                textureOffset,
                0,
                1,
                64,
                ray + 148,
                46 + (HALF_HEIGHT - WallHeight / 2),
                1,
                WallHeight
            );

Well, I want to add some sprites at game. How can I do it, using html canvas and based on it raycaster? Is it even possible? I tried to draw a circle on 2D map, as a result I get another wall, it’s kinda strange. Also I tried to make a different textures on the walls, by replacing WALLS[0] to WALLS[textureImg] thats not worked(I get an error).