javascript – How to draw the player standing behind a tree in an Entity Component System?

I’m making a top-down Javascript canvas game using the Entity Component System architecture.

For an entity to be drawn on the screen every frame, it needs a PositionComponent and a SpriteComponent. The rendering system looks like this:

for (let entity of scene.query(CT.Sprite, CT.Position)) {      
  this.drawEntity(entity);
}

This works well, but I’m not sure how to modify this to give the player the ability to hide behind objects. For example, in Stardew Valley, you can stand in front of, and behind, objects, as demonstrated in this screenshot: https://i.imgur.com/B90jGS7.png

How can this be implemented in an ECS? Because currently my rendering system just iterates through every object and draws them.

Also, currently, for drawing the map (scenery and whatnot), it renders the map to a texture and then just redraws that single texture every frame (for performance reasons, instead of redrawing 10,000 tiles every frame). I’d imagine this makes it even more difficult to integrate.

My assumption is that I have to take into account the entity’s position in some way? That is, an entity with { x: 0, y: 400 } will be drawn before an entity with position { x: 0, y: 500 }, but I’m also unsure of how to integrate this with an ECS.

Thanks for reading.