자바 스크립트를 사용하여 HTML 페이지에서 캔버스 크기 변경

다음 질문은 내가이 코드 펜을 적용하고자하는 내용을 기반으로합니다.

여기 펜입니다

캔버스를 표시하기 위해 다음 html이 있습니다 (HTML 페이지의 섹션에만 있고 전체 페이지를 차지하지 않기를 바랍니다).

<div class="container">
    <canvas id="c"></canvas>
</div>

애니메이션을 보여주는 캔버스 용 javascript는 다음과 같습니다.

<script>
    var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var H = window.innerHeight;
var W = window.innerWidth;
canvas.height = H;
canvas.width = W;

var NBR_PARTICLES = 100;
var INTENSITY = 55;
var BLUE_RATIO = 5;

particles = [];
for (var i = 0; i < NBR_PARTICLES; i++) {
    particles.push( new particle(i) );
};

function particle(i){
    this.size = rand(0, 1.4);
    this.x = W / 2;
    this.y = H / 2;
    this.vx = rand(-1, 1);
    this.vy = rand(-1, 1);
    this.decay = rand(0.9, 1);
    this.c = 0;
}

function draw(){
    for (var i = 0; i < NBR_PARTICLES; i++) {
        p = particles[i];
        ctx.fillStyle = color(p.size);
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, Math.PI*2, false);
        ctx.fill();
        p.size *= p.decay;
        p.x += p.vx;
        p.y += p.vy;
        p.vx += rand(-.2, .2);
        p.vy += rand(-.2, .2);
        p.c++;
        if(p.size < .2){
            particles[i] = new particle(i);
        }
    };
}

function color(i){
    value = 255 - Math.round( (i * (255 / NBR_PARTICLES)) * INTENSITY);
    return "rgba(" + value + ", 0, " + Math.round((NBR_PARTICLES - i) / BLUE_RATIO) + ", .75)";
}


setInterval(draw, 33);


/*************************
    CONSTRUCT FUNCTIONS
**************************/

function rand(min, max){
    value = min + Math.random() * ( max - min );
    return value;
}
function cd(args){ // FOR DEBUG
    console.dir(args);
}
</script>

캔버스 크기가 현재와 같이 전체 페이지가 아닌 페이지 전체에 직사각형 배너가되기를 원합니다.

이 변수를 변경해 보았습니다.

var H = window.innerHeight;
var W = window.innerWidth;
canvas.height = H;
canvas.width = W;

...에

canvas.height = 200;
canvas.width = 800;

그러나 그것은 애니메이션을 전혀 렌더링하지 않지만 캔버스 크기를 조정하는 것처럼 보입니다.

여기 CSS는 전체 애니메이션이 페이지를 차지하고 기존 콘텐츠가 더 이상 표시되지 않기 때문에 기존 본문을 재정의하는 것처럼 보입니다.

body, html{
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ddd;
}

CSS에서 시체를 제거하려고했지만 전혀 작동하지 않았습니다.

또한 위에서 볼 수 있듯이 캔버스를 분리하기를 바라면서 div 컨테이너를 추가했지만 작동하지 않았습니다.

<div class="container">
    <canvas id="c"></canvas>
</div>  

캔버스가 화면의 일부 (내가 결정한 캔버스의 너비와 높이)에만 렌더링하도록이 코드를 조정하는 방법은 무엇입니까?