how to set three js canvas width 100 25

1body { margin: 0; }
2canvas { width: 100vw; height: 100vh; display: block; }

1"use strict";
2
3const renderer = new THREE.WebGLRenderer();
4document.body.appendChild(renderer.domElement);
5
6// There's no reason to set the aspect here because we're going
7// to set it every frame anyway so we'll set it to 2 since 2
8// is the the aspect for the canvas default size (300w/150h = 2)
9const  camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
10camera.position.z = 400;
11
12const scene = new THREE.Scene();
13const geometry = new THREE.BoxGeometry(200, 200, 200);
14const material = new THREE.MeshPhongMaterial({
15  color: 0x555555,
16  specular: 0xffffff,
17  shininess: 50,
18  shading: THREE.SmoothShading
19});
20
21const mesh = new THREE.Mesh(geometry, material);
22scene.add(mesh);
23
24const light1 = new THREE.PointLight(0xff80C0, 2, 0);
25light1.position.set(200, 100, 300);
26scene.add(light1);
27
28function resizeCanvasToDisplaySize() {
29  const canvas = renderer.domElement;
30  const width = canvas.clientWidth;
31  const height = canvas.clientHeight;
32  if (canvas.width !== width ||canvas.height !== height) {
33    // you must pass false here or three.js sadly fights the browser
34    renderer.setSize(width, height, false);
35    camera.aspect = width / height;
36    camera.updateProjectionMatrix();
37
38    // set render target sizes here
39  }
40}
41
42function animate(time) {
43  time *= 0.001;  // seconds
44
45  resizeCanvasToDisplaySize();
46
47  mesh.rotation.x = time * 0.5;
48  mesh.rotation.y = time * 1;
49
50  renderer.render(scene, camera);
51  requestAnimationFrame(animate);
52}
53
54requestAnimationFrame(animate);