Html 画布1应根据窗口调整大小，画布2的大小应固定

我有两个画布元素（canvas1和canvas2）。“canvas1”应该调整大小以适应窗口，这是可行的。然而，“画布2”的大小应该保持不变。这不起作用，因为此画布也在调整大小以适应窗口。如何更改代码以获得所需的结果

我有以下（简化的）HTML代码：

<script>
{% block jquery %}

$(document).ready(function(){
    showImage();
});

function showImage(){
    var c = document.getElementById('canvas2')
    var ctx = c.getContext('2d');
    var img = new Image();
    img.src = '{{STATIC_URL}}/static/my_app/img/my_image.png' 
    c.width = 100
    c.height = 100
    img.onload = function () {
        ctx.drawImage(img,0,0, img.width, img.height);
    }
}
{% endblock %}
</script>

{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'collectorField/css/style.css' %}">

<canvas id="canvas1" width="1000" height="500" style="border:1px solid #000000;"></canvas>

<canvas id="canvas2" width="100" height="100" style="border:1px solid #000000;"></canvas>

{% endblock %}

---

好的，这其实很简单，很抱歉打扰大家

我更改了style.css文件，如下所示：

canvas {
  background-color: white; 
  width: 100%;
  height: auto;
}

#canvas1 {
  background-color: white; 
  width: 100%;
  height: auto;
}

---

因此，它不应用于所有画布元素，而只应用于“canvas1”。

您是否可以删除模板代码并将其转换为工作片段？我也看不到任何全屏显示的

canvas1

代码，所以我看不出为什么会这样。第二个画布可能与

img.width

不是

img.naturalWidth

有关，因此它可能是

0

？试着画一画，看看你的基本功是否行得通。