Scale canvas with css

Help Programming
,
1

Godot Version

4.1

Question

I want to insert a godot 2D animation in a webpage.

The animation has this dimensions:

width: 1200 pixels
height: 675 pixels

The webpage is responsive, so i need to scale the canvas in which the godot animation is displayed.

I am using the custom html template:

ORIGINAL CODE:

My Template const GODOT_CONFIG = {"args":[],"canvasResizePolicy":1,"executable":"test","experimentalVK":false,"fileSizes":{"test.pck":113920,"test.wasm":48593119},"focusCanvas":true,"gdextensionLibs":[]}; 
    const engine = new Engine(GODOT_CONFIG);

    engine.startGame();
</script>
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

With the previous code the canvas used by the godot animation has this dimensions:

width: 1200 pixels
height: 675 pixels

I tried to scale the canvas with this code:

But the canvas did not scale and the godot 2D animation did not scale…

Then I tried to scale the canvas with this code:

But the canvas did not scale and the godot 2D animation did not scale…

It is possible to change the canvas size?

It is possible to change the godot 2D animation size?

How can be done that?
In godot preferences I used:

SIZE
Mode: windowed

STRECHT
Mode: viewport
Aspect: Ignore or keepwidth

I have also used:

A)
canvasResizePolicy 0

with

the canvas and the godot 2D animation does resize but the animation is blurred

B)
canvasResizePolicy 1

with

the godot 2D animation is clear and other html elements are visible, but the canvas and the godot animation don’t resize

c)
canvasResizePolicy 2

with

but the canvas and the godot 2D animation expands all over the screen and other html elements are not visible

Thank you in advance…

2

I want to insert a godot animation in a webpage.

The animation has this dimensions:

width: 1200 pixels
height: 675 pixels

The webpage is responsive, so i need to scale the canvas in which the godot animation is displayed.

I am using the custom html template:

ORIGINAL CODE:

<!DOCTYPE html>
<html>
<head>
<title>My Template</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas"></canvas>
<script src="test.js"></script>
<script>
const GODOT_CONFIG = {"args":[],"canvasResizePolicy":1,"executable":"test","experimentalVK":false,"fileSizes":{"test.pck":113920,"test.wasm":48593119},"focusCanvas":true,"gdextensionLibs":[]};

        const engine = new Engine(GODOT_CONFIG);

        engine.startGame();
    </script>
</body>

</html>

With the previous code the canvas used by the godot animation has this dimensions:

width: 1200 pixels
height: 675 pixels

I tried to scale the canvas with this code:

<canvas id="canvas" style="width: 600px; height: 337px"></canvas>

But the canvas did not scale and the godot animation did not scale…

Then I tried to scale the canvas with this code:

<canvas id="canvas" style="width: 600px !important; height: 337px !important"></canvas>

But the canvas did not scale and the godot animation did not scale…

It is possible to change the canvas size?

It is possible to change the godot animation size?

How can be done that?
In godot preferences I used:

SIZE
Mode: windowed

STRECHT
Mode: viewport
Aspect: Ignore or keepwidth

I have also used:

canvasResizePolicy 0
but the animation is blurred

canvasResizePolicy 1
the animation is clear and other html elements are visible

canvasResizePolicy 2
but the canvas and the godot animation expands all over the screen and other html elements are not visible

Thank you in advance…