Canvas 1 должен изменить размер окна, Canvas 2 должен быть фиксированного размера

Question

У меня есть два элемента canvas (canvas1 и canvas2). «canvas1» должен изменить размер, чтобы соответствовать окну, это работает. Однако «canvas2» должен оставаться фиксированным по размеру. Это не работает, так как этот холст также изменяет размеры, чтобы соответствовать окну. Как изменить мой код, чтобы я получил желаемый результат?

У меня есть следующий (упрощенный) 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 %}

Связанная таблица стилей CSS (style.css) определяется следующим образом:

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

Answer 1

Хорошо, так что это на самом деле довольно просто, извините, что беспокою вас всех.

Я изменил свой файл style.css следующим образом:

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

Таким образом, вместо применения ко всем элементам холста, он применяется только к "canvas1".