Размер холста 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;
}