Размер холста HTML

Question

Я хочу динамически изменять размер холста в соответствии с содержанием DIV. Я использую следующий код, но он не работает.

<canvas id="canvas1" width="800" height="2000" > <canvas> 

Javascript

document.getElementById("canvas1").style.height = document.getElementById("div").style.height; 
document.getElementById("canvas1").style.width= document.getElementById("div").style.width; 

Также я хочу, что загружен холст автоматически, как я должен делать это? на мероприятии $(document).ready?

Как мне это сделать?

Answer 1

Используйте offsetWidth, чтобы получить размеры элемента (включая границы).

// loaded automatically on page load 
window.onload = function() { 
    var div = document.getElementById("div"); 
    var canvas = document.getElementById("canvas1"); 
    canvas.height = div.offsetHeight; 
    canvas.width = div.offsetWidth; 
}