How to make the canvas layer automatically fill the entire screen when in full screen?

Godot Version

Godot 4.1 Stable


Hello. Everyone. My first post for question here.
I want to learn some knowledges about resolution or UI Layer, I don’t know how to call it perfectly. I created a Node2d as my main scene and its resolution(or size) is 1152×648, in windowed mode it fills the whole viewpoint. But I want to my it can also fill the whole viewpoint after I run it as fullscreen mode. Now, it won’t zoom in proportionally and fill the full-screen viewport. It just only takes up a small portion of the upper left, roughly the area of its original size.

May I ask how can I get it to stretch proportionally even in full screen, so that the leftmost button is still on the far left, the rightmost ammonium button is still on the far right and fills the viewport area correctly? Thank you all guys.

Use anchor preset “Full Rect”?


use control node with your ui button inside it
set control layout to anchor and make it full rect, it should cover whole your screen regardless resolution

1 Like

As others have answered, anchor presets are your friends. Use nodes that inherit from Control.

For example, if you need to display an image on the UI/Overlay, use TextureRect control instead of Sprite2D.

1 Like

Hello. First thank you and the members above who gave me advice. One question, when using TextureRect control instead of Sprite2D, will it affect me something if I want import image into this node? Thank you.

No, you assign Texture to it just like you would to Sprite2D.

1 Like

Thank you very much. Also thanks to @zdrmlpzdrmlp and @Exerion .


In my default setting, if I just set anchor preset “Full Rect”, the TextureRect will change the position. And once it change the position, whatever I use full-screen or just windowed, it won’t show all.

Are there anything I also to change? Thank you very much.

Can you show your config for Container Sizing? The settings there are most important.

Can you also show your scene tree? i.e. which controls do you have in this scene. Is it a Canvas Layer at the root/top and then just TextureRectangles under it?

I see blue, black, red colors… is it all part of one single texture/image?

Yes. I will send some screenshots of them.

I painted this image with 4 kinds of colors: red, black, orange and blue. I make this picture to test if I can get the color of pixels under my mouse’s position. Anyway, it is another problem.

Please ignore some text that is shown in English if it doesn’t affect you to judge the reasons

In the beginning, I set the position at (0, 0) and made the size 1152*648. Which made my picture just can’t fill all the viewport after I ran it in full-screen. And I followed the @Exerion 's suggestion, but the position and size just changed by themselves.

Not sure if this is the only problem, but it’s definitely a problem: you have a Node2D as parent. Node2D objects don’t work the same way as Control objects do when it comes to UI placement. You should have zero Node2D objects as part of your UI. So yes, delete that Sprite2D there, too. Only use objects that inherit from Control (i.e. green color only).

You’re also not showing which parent object “ChooseNation” is added to in the final scene - generally, it should be added to a CanvasLayer object. Here’s my main menu scene tree as an example:

Note that only green objects are used, the parent is a CanvasLayer, etc.

I just set the Node"ChooseNation" as the root node, and it is a Control Node itself. I am fixing it by deleting all non-control node and see what will happen.

Also one another problem when I only use Control Nodes is I will face some error tips such as

Invalid set index 'texture' (on base: 'null instance') with value of type 'ImageTexture'.

in my stack tracking, and

Node not found: Sprite2D

in my debugger.

I need these non-control nodes such as Sprite2d or Nod2d is because I need to create a GDScript that allows me to get colors of pixels on the mouse position. I don’t know if it is allowed to use Control Nodes in the whole scene tree if I have this main goal.

My GDScipt codes:

extends TextureRect

# Called when the node enters the scene tree for the first time.
func _ready():
	pass # Replace with function body.

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(_delta):
	# 导入图片资源作为Image和ImageTexture,并获得节点的贴图
	var 图片 = Image.load_from_file("res://colorimg.png")
	var 贴图 =ImageTexture.create_from_image(图片)
	$Sprite2D.texture = 贴图
	var 纹理图片 = get_viewport().get_texture()
	var 鼠标实时位置: Vector2 = get_viewport().get_mouse_position()
	var x1: float = 鼠标实时位置.x
	var y1: float = 鼠标实时位置.y
	var 鼠标位置的颜色 = 图片.get_pixel(x1,y1)
	var 图片的尺寸 = 图片.get_size()
	# 如果鼠标位于视口的范围内,则显示鼠标的坐标值,否则提示“已经超出了视口的边界范围”
	if x1 < 1152 and x1>0 and y1<648 and y1>0:
	print("视口的尺寸大小是:", get_viewport().get_visible_rect().size)

I use some non-latin alphabets as my variables’ names. If you feel it is hard to understand for yourself, I am glad to change them into English words for you.

Thank you

  1. The top line should be “extends Control”, not “extends TextureRect”
  2. No, you don’t need Node2D or Sprite2D. You get an error because when you remove the nodes from the scene tree, you still have a reference to them in the code file. So you need to delete/replace references to them in the code file, too.
  3. Never hard-code viewport size (1152x648), though this isn’t related to your current problem. Just a general note.
  4. Simply use built-in “load” method to load images into textures. So replace the first 3 lines with:
$TextureRect.texture = load("res://colorimg.png")

^ this will work after you move TextureRect to be directly under “ChooseNation” control node and not under Node2D (again, you should delete Node2D).

If you’re looking for a nice tutorial that goes over many core features of Godot and how to use them, may I suggest this one:

1 Like

Hello. @alextheukrainian

I really appreciate your kind help. I will try your advice soon and see if there will be good news.

Edited: I deleted the Node2d node, set the TextureRect as a child of “ChooseNation”, changed the"extends TextureRect" to “extends Node” and loaded this script to TextureRect Node, and I got the error like this:

Invalid set index ‘texture’ (on base: ‘null instance’) with value of type ‘CompressedTexture2D’.

If I load the script to “ChooseNation” node, then I will get

Invalid call. Nonexistent function ‘get_pixel’ in base ‘TextureRect’.

Please can someone tell me how to resolve it? Should I change the file’s format/type when importing it?

capixo - I’ll just be frank with you (and I say this with utmost respect): if you can’t immediately understand the “Invalid call. Nonexistent function ‘get_pixel’ in base ‘TextureRect’.” error then you really lack basic knowledge of Godot and/or programming in general.

At this point my best advice is that you follow the tutorial I linked above and learn the basics of Godot.

If it’s too difficult to follow that tutorial, you should instead focus on learning the basics of programming. Pick up any book for beginners in programming language of your choice (I recommend Python).

But I have to use the “get_pixel” function to get the color value of the mouse position. Wouldn’t it be a logical contradiction if I need to use TextureRect and it doesn’t have a built-in function for “get_pixel”?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.