How to set the view.viewSize of canvas in Paper.js with Bootstrap

Question

I'm trying to make a website with a navbar as 4 circles in paper.js. However, with the resize option the canvas element takes up the whole page. I've used the example given on http://paperjs.org/tutorials/getting-started/working-with-paper-js/ and my I'm using twitter bootstrap for the other stuff. I'm using col-md-12 for the div containing the canvas. I tried the solution given on make canvas as wide and as high as parent but it doesn't work.

Any help?

Answer 1

You can achieve it using Javacript:

$(window).resize(resizeAndRedrawCanvas);

function resizeAndRedrawCanvas()
{
  var desiredWidth = w; // For instance: $(window).width();
  var desiredHeight = h; // For instance $('#canvasContainer').height();

  canvas.width = desiredWidth;
  canvas.height = desiredHeight 

  view.viewSize = new Size(desiredWidth, desiredHeight);
  view.draw();
}