对于<canvas>元素，宽度和高度的CSS规则设置将绘制到页面的canvas元素的实际大小。另一方面，宽度和高度的HTML属性设置了画布API将使用的坐标系统或“网格”的大小。

例如，考虑这个(jsfiddle):

var ctx = document.getElementById('canvas1').getContext('2d'); ctx。fillStyle = "red"; ctx。fillRect(10,10,30,30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2。fillStyle = "red"; ctx2。fillRect(10,10,30,30); 帆布{ 边框:1px纯黑色; ｝ < span style=" font - family:宋体;" Height ="50" width="100"></canvas> . < span style=" font - family:宋体;" Height ="50" width="100"></canvas> .

相对于canvas元素的内部坐标，两者都有相同的东西被画在上面。但在第二个画布中，红色矩形的宽度将是原来的两倍，因为根据CSS规则，整个画布将被拉伸到更大的区域。

注意:如果CSS的宽度和/或高度规则没有指定，那么浏览器将使用HTML属性来调整元素的大小，使这些值的1个单位等于页面上的1px。如果没有指定这些属性，则默认宽度为300，高度为150。

Shannimal校正

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

对于<canvas>元素，宽度和高度的CSS规则设置将绘制到页面的canvas元素的实际大小。另一方面，宽度和高度的HTML属性设置了画布API将使用的坐标系统或“网格”的大小。

例如，考虑这个(jsfiddle):

var ctx = document.getElementById('canvas1').getContext('2d'); ctx。fillStyle = "red"; ctx。fillRect(10,10,30,30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2。fillStyle = "red"; ctx2。fillRect(10,10,30,30); 帆布{ 边框:1px纯黑色; ｝ < span style=" font - family:宋体;" Height ="50" width="100"></canvas> . < span style=" font - family:宋体;" Height ="50" width="100"></canvas> .

相对于canvas元素的内部坐标，两者都有相同的东西被画在上面。但在第二个画布中，红色矩形的宽度将是原来的两倍，因为根据CSS规则，整个画布将被拉伸到更大的区域。

注意:如果CSS的宽度和/或高度规则没有指定，那么浏览器将使用HTML属性来调整元素的大小，使这些值的1个单位等于页面上的1px。如果没有指定这些属性，则默认宽度为300，高度为150。

如果你想要一个动态的行为，例如CSS媒体查询，不要使用画布的宽度和高度属性。使用CSS规则，然后，在获得画布渲染上下文之前，为width和height属性分配CSS width和height样式:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...

如果你在CSS中设置了宽度和高度，画布将被拉伸。如果你想动态地操纵画布的尺寸，你必须像这样使用JavaScript:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

我相信CSS有更好的机制来指定画布的大小，CSS必须决定样式，而不是JavaScript或HTML。话虽如此，在HTML中设置宽度和高度对于解决canvas问题很重要。

CSS有一个重要的规则，允许重写属性的其他样式规则，包括HTML中的规则。通常，它的使用是不受欢迎的，但这里的使用是合法的。

在WebAssembly的Rust模块中，你可以做以下事情:

fn update_buffer(canvas: &HtmlCanvasElement) {
    canvas.set_width(canvas.client_width() as u32);
    canvas.set_height(canvas.client_height() as u32);
}

//.. 
#[wasm_bindgen(start)]
pub fn start() -> Result<(), JsValue> {
    // ...
    let canvas: Rc<_> = document
        .query_selector("canvas")
        .unwrap()
        .unwrap()
        .dyn_into::<HtmlCanvasElement>()
        .unwrap()
        .into();
    update_buffer(&canvas);
    // ...

    // create resizing handler for window
    {
        let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| {
            let canvas = canvas.clone();
            // ...

            update_buffer(&canvas);
            // ...
        window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?;
        on_resize.forget();
    }
}

在那里，一旦WASM模块被加载，我们就更新画布缓冲区，然后每当窗口大小被调整时。我们通过手动指定画布的宽度和高度作为clientWidth和clientHeight的值来做到这一点。也许有更好的方法来更新缓冲区，但我相信这个解决方案比@SamB， @CoderNaveed， @Anthony Gedeon， @Bluerain， @Ben Jackson， @Manolo， @XaviGuardia， @Russel Harkins和@fermar的建议更好，因为

元素的样式是CSS，而不是HTML。 不像@Manolo使用的element .style.width & element .style.height技巧或@XaviGuardia使用的JQuery等效，它将工作于画布，其大小由使用指定为flex或网格项。 不像@Russel Harkings的解决方案，这也处理调整大小。虽然我喜欢他的答案，因为它真的是干净和简单。 WASM是未来!哈哈:D

另外，有大量的.unwrap()，因为Rust显式地处理可能的失败。

P.P.S.

    {
        let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| {
            let canvas = canvas.clone();
            // ...

            update_buffer(&canvas);
            // ...
        window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?;
        on_resize.forget();
    }

使用更好的库可以更干净地完成。如。

add_resize_handler(&window, move |e: ResizeEvent| {
  let canvas = canvas.clone();
  // ...

  update_buffer(&canvas);
})