diff --git a/htdocs/lib/Spectrum.js b/htdocs/lib/Spectrum.js index 63274050..471b7f44 100644 --- a/htdocs/lib/Spectrum.js +++ b/htdocs/lib/Spectrum.js @@ -1,12 +1,10 @@ function Spectrum(el) { this.el = el; - this.ctx = this.el.getContext("2d"); + this.ctx = null; this.min = 0; this.max = 0; this.timer = 0; this.data = []; - - this.ctx.fillStyle = "rgba(255, 255, 255, 0.4)"; } Spectrum.prototype.update = function(data) { @@ -36,9 +34,18 @@ Spectrum.prototype.draw = function() { var data_end = Math.round(fft_size * vis_end); var data_width = data_end - data_start; var data_height = Math.abs(this.max - this.min); - var spec_width = this.el.clientWidth; - var spec_height = this.el.clientHeight; + var spec_width = this.el.offsetWidth; + var spec_height = this.el.offsetHeight; + // If canvas got resized, or no context yet... + if (!this.ctx || spec_width!=this.el.width || spec_height!=this.el.height) { + this.el.width = spec_width; + this.el.height = spec_height; + this.ctx = this.el.getContext("2d"); + this.ctx.fillStyle = "rgba(255, 255, 255, 0.4)"; + } + + // Clear canvas to transparency this.ctx.clearRect(0, 0, spec_width, spec_height); if(spec_width < data_width) { diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js index 72b9470b..ddbdcd86 100644 --- a/htdocs/openwebrx.js +++ b/htdocs/openwebrx.js @@ -1516,7 +1516,7 @@ function openwebrx_init() { open_websocket(); secondary_demod_init(); digimodes_init(); - spectrum_init(); + initSpectrum(); initPanels(); $('#openwebrx-panel-receiver').demodulatorPanel(); window.addEventListener("resize", openwebrx_resize); @@ -1655,11 +1655,11 @@ function initPanels() { }); } -function spectrum_init() { +function initSpectrum() { var canvas = document.getElementById('openwebrx-spectrum-canvas'); - canvas.width = window.innerWidth; - canvas.height = 50; + canvas.style.width = '100%'; + canvas.style.height = '50px'; spectrum = new Spectrum(canvas); spectrum.close();