javascript - I can't find a way to change the canvas size -

i found amazing code (props creator) online , have been playing can't find how change canvas size. width , length of it.

this java controls canvas. how change width/height?

<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script> <script> var glitcher = { init: function () { settimeout((function () {        this.canvas = document.getelementbyid( 'stage' );       this.context = this.canvas.getcontext( '2d' );        this.initoptions();       this.resize();       this.tick(); }).bind(this), 100); }, initoptions: function () {      var gui = new dat.gui(1),             current = gui.addfolder('current'),             controls = gui.addfolder('controls');       this.width = document.documentelement.offsetwidth;     this.height = window.innerheight;      this.font = 'bold 12vw arial'; this.context.font = this.font;     this.text = "bryan chicas";     this.textwidth = (this.context.measuretext(this.text)).width;      this.fps = 60;      this.channel = 0; // 0 = red, 1 = green, 2 = blue     this.compop = 'lighter'; // compositeoperation = lighter || darker || xor      this.phase = 0.0;     this.phasestep = 0.05; //determines how change channel , amplitude     this.amplitude = 0.0;     this.amplitudebase  = 2.0;     this.amplituderange = 2.0;     this.alphamin = 0.8;      this.glitchamplitude = 20.0;     this.glitchthreshold = 0.9;      this.scanlinebase = 40;     this.scanlinerange = 40;     this.scanlineshift = 15;      current.add(this, 'channel', 0, 2).listen();     current.add(this, 'phase', 0, 1).listen();     current.add(this, 'amplitude', 0, 5).listen();      var text = controls.add(this, 'text');     text.onchange((function (value) {         this.textwidth = (this.context.measuretext(this.text)).width;     }).bind(this));     controls.add(this, 'fps', 1, 60);     controls.add(this, 'phasestep', 0, 1);     controls.add(this, 'alphamin', 0, 1);     controls.add(this, 'amplitudebase', 0, 5);     controls.add(this, 'amplituderange', 0, 5);     controls.add(this, 'glitchamplitude', 0, 100);     controls.add(this, 'glitchthreshold', 0, 1);     controls.open();     // gui.add(fizzytext, 'noisestrength', 0, 100).listen();  }, tick: function () {     settimeout((function () {          this.phase += this.phasestep;          if( this.phase > 1 ) {             this.phase     = 0.0;             this.channel   = (this.channel === 2) ? 0 : this.channel + 1;             this.amplitude = this.amplitudebase + (this.amplituderange * math.random());         }          this.render();         this.tick();      }).bind(this), 1000 / this.fps); }, render: function () {     var x0 = this.amplitude * math.sin( (math.pi * 2) * this.phase ) >> 0,             x1, x2, x3;      if( math.random() >= this.glitchthreshold ) {         x0 *= this.glitchamplitude;     }      x1 = this.width - this.textwidth >> 1;     x2 = x1 + x0;     x3 = x1 - x0;      this.context.clearrect( 0, 0, this.width, this.height );     this.context.globalalpha = this.alphamin + ((1-this.alphamin) * math.random());      switch( this.channel ) {         case 0: this.renderchannels(x1, x2, x3); break;         case 1: this.renderchannels(x2, x3, x1); break;         case 2: this.renderchannels(x3, x1, x2); break;     }      this.renderscanline(); }, renderchannels: function (x1, x2, x3) { this.context.font = this.font;     this.context.fillstyle = "rgb(255,0,0)";     this.context.filltext(this.text, x1, this.height/2);      this.context.globalcompositeoperation = this.compop;      this.context.fillstyle = "rgb(0,255,0)";     this.context.filltext(this.text, x2, this.height/2);     this.context.fillstyle = "rgb(0,0,255)";     this.context.filltext(this.text, x3, this.height/2); }, renderscanline: function () {     var y = this.height * math.random() >> 0,   o = this.context.getimagedata( 0, y, this.width, 1 ),   d = o.data,   = d.length,   s = this.scanlinebase + this.scanlinerange * math.random() >> 0,   x = -this.scanlineshift + this.scanlineshift * 2 * math.random() >> 0;      while( i-- > 0 ) {         d[i] += s;     }      this.context.putimagedata( o, x, y ); }, resize: function () {  if(this.canvas) {         this.canvas.width = document.documentelement.offsetwidth;         this.canvas.height = window.innerheight;  } } };  glitcher.init(); window.onresize = glitcher.resize; </script> 

modify theses lines:

this.width = 100; //document.documentelement.offsetwidth; this.height = 500; //window.innerheight; 

with values dimensions. if want in line:

this.font = 'bold 8vw arial'; 

change font family , size.

good luck!