How to resize a canvas on resizing?

Question

I'm using this plugin: https://codepen.io/acauamontiel/pen/mJdnw

 /* * requestAnimationFrame pollyfill */ if (!window.requestAnimationFrame) { window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 1000 / 60); }); } /*! * Mantis.js / jQuery / Zepto.js plugin for Constellation * @version 1.2.2 * @author Acauã Montiel <contato@acauamontiel.com.br> * @license http://acaua.mit-license.org/ */ (function ($, window) { /** * Makes a nice constellation on canvas * @constructor Constellation */ function Constellation (canvas, options) { var $canvas = $(canvas), context = canvas.getContext('2d'), defaults = { star: { color: 'rgba(255, 255, 255, .5)', width: 1, randomWidth: true }, line: { color: 'rgba(255, 255, 255, .5)', width: 0.2 }, position: { x: 0, // This value will be overwritten at startup y: 0 // This value will be overwritten at startup }, width: window.innerWidth, height: window.innerHeight, velocity: 0.1, length: 100, distance: 120, radius: 150, stars: [] }, config = $.extend(true, {}, defaults, options); function Star () { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (config.velocity - (Math.random() * 0.5)); this.vy = (config.velocity - (Math.random() * 0.5)); this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width; } Star.prototype = { create: function(){ context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); context.fill(); }, animate: function(){ var i; for (i = 0; i < config.length; i++) { var star = config.stars[i]; if (star.y < 0 || star.y > canvas.height) { star.vx = star.vx; star.vy = - star.vy; } else if (star.x < 0 || star.x > canvas.width) { star.vx = - star.vx; star.vy = star.vy; } star.x += star.vx; star.y += star.vy; } }, line: function(){ var length = config.length, iStar, jStar, i, j; for (i = 0; i < length; i++) { for (j = 0; j < length; j++) { iStar = config.stars[i]; jStar = config.stars[j]; if ( (iStar.x - jStar.x) < config.distance && (iStar.y - jStar.y) < config.distance && (iStar.x - jStar.x) > - config.distance && (iStar.y - jStar.y) > - config.distance ) { if ( (iStar.x - config.position.x) < config.radius && (iStar.y - config.position.y) < config.radius && (iStar.x - config.position.x) > - config.radius && (iStar.y - config.position.y) > - config.radius ) { context.beginPath(); context.moveTo(iStar.x, iStar.y); context.lineTo(jStar.x, jStar.y); context.stroke(); context.closePath(); } } } } } }; this.createStars = function () { var length = config.length, star, i; context.clearRect(0, 0, canvas.width, canvas.height); for (i = 0; i < length; i++) { config.stars.push(new Star()); star = config.stars[i]; star.create(); } star.line(); star.animate(); }; this.setCanvas = function () { canvas.width = config.width; canvas.height = config.height; }; this.setContext = function () { context.fillStyle = config.star.color; context.strokeStyle = config.line.color; context.lineWidth = config.line.width; }; this.setInitialPosition = function () { if (!options || !options.hasOwnProperty('position')) { config.position = { x: canvas.width * 0.5, y: canvas.height * 0.5 }; } }; this.loop = function (callback) { callback(); window.requestAnimationFrame(function () { stats.begin(); // Only for Stats this.loop(callback); stats.end(); // Only for Stats }.bind(this)); }; this.bind = function () { $canvas.on('mousemove', function(e){ config.position.x = e.pageX - $canvas.offset().left; config.position.y = e.pageY - $canvas.offset().top; }); }; this.init = function () { this.setCanvas(); this.setContext(); this.setInitialPosition(); this.loop(this.createStars); this.bind(); }; } $.fn.constellation = function (options) { return this.each(function () { var c = new Constellation(this, options); c.init(); }); }; })($, window); // Init plugin $('canvas').constellation({ star: { width: 3 }, line: { color: 'rgba(255, 0, 0, .5)' }, radius: 250 }); 

 body { overflow: hidden; background: #111; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <canvas></canvas> 

As you can see, when you resize your screen, the canvas keeps the original width and height, I would like to give the capacity to resize the window and do like a restart on the plugin to keep it fullscreen.

Answer 1

First

wrap your plugin initializing code with a function, like so ...

function init_plugin() {
   $('canvas').constellation({
      star: {
         width: 3
      },
      line: {
         color: 'rgba(255, 0, 0, .5)'
      },
      radius: 250
   });
}
init_plugin(); //init plugin

Second

add a window resize event handler and within that do all the necessary stuff ...

window.onresize = function() {
   cancelAnimationFrame(rAF); //cancel current animation frame
   $('canvas')[0].width = window.innerWidth; //reset canvas width
   $('canvas')[0].height = window.innerHeight; //reset canvas height
   init_plugin(); //init plugin
}

also, you would need to assign requestAnimationFrame() to a globally accessible variable (here, it's rAF ) , so you can cancel it later.

Here is the working code on CodePen

^{apology for not giving that much explanation}