使用 javascript 更改 html 页面上的 canvas 大小

Question

The following question is based on an adaption I wish to make of this codepen:

Here is a Pen

I have the following html for displaying the canvas (I want it to be only in a section on the html page and not take up the whole page)

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

The javascript for the canvas which shows an animation is below.

<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>

I want the canvas size to be a rectangular banner across the page rather than the whole page as it is now.

I have tried changing these variables

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

to

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

but that doesn't render the animation at all but does appear to resize the canvas.

The CSS here appears to override the existing body as the whole animation takes over the page and my existing content is no longer displayed.

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

I tried removing the body from the css but that didn't work at all.

I also, as you can see above, added a div container, hoping that would isolate the canvas but that hasn't worked either.

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

How do I adapt this code to make the canvas only render on a portion (width and height of the canvas decided by me) on the screen.

Answer 1

Setting directly the height H and width W , will show canvas correctly at center:

below snippet you can see result centred annilation correctly

 var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); // set here canvas width and height directly var H = 200; var W = 200; 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(px, py, p.size, Math.PI*2, false); ctx.fill(); p.size *= p.decay; px += p.vx; py += 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); }

 body, html{ margin: 0; padding: 0; overflow: hidden; background-color: #ddd; text-align:center } canvas { border: 1px solid gray; }

 <canvas id="c"></canvas>