How do I bind p5 canvas to an html page?

So, I am working with AngularJS website for medical big data visualization @ UCSF and trying to use p5.js. I hope to bind the canvas only to a specific part like so below but its not working.

What am I missing?

html
        <body>
          <div id="canvasHolder"></div>
        </body>

CSS
        #canvasHolder{
          width:700px;
          height:450px;
          position: absolute;
          margin: auto;
          left: 0;
          right: 0;
          top:0;
          bottom:0;
        }

Js
            var canvas = createCanvas(width, height);
            canvas.parent('canvasHolder');

Answers

  • edited October 2015 Answer ✓

    Variables width & height are properties of the p5.Renderer created by createCanvas():

    1. http://p5js.org/reference/#/p5/createCanvas
    2. http://p5js.org/reference/#/p5/width
    3. http://p5js.org/reference/#/p5/height

    It's got nothing to do w/ the corresponding HTMLDivElement's own width & height CSS properties whose id is "canvasHolder":

    1. https://developer.Mozilla.org/en-US/docs/Web/API/HTMLDivElement
    2. https://developer.Mozilla.org/en-US/docs/Web/CSS/width
    3. https://developer.Mozilla.org/en-US/docs/Web/CSS/height

    In order to grab the latter, you're gonna need function select() from library "p5.dom.js":
    http://p5js.org/reference/#/p5/select

    It's gonna wrap the HTMLElement found as a p5.Element though:

    1. http://p5js.org/reference/#/p5.Element
    2. https://developer.Mozilla.org/en-US/docs/Web/API/HTMLElement

    From there, we can directly access its properties like width, height & elt! :-bd
    Dunno anything 'bout AngularJS. But here's my attempt w/ regular HTML/CSS/JS: :P

    <meta charset=utf8>
    <meta name=viewport content=width=device-width,user-scalable=no,initial-scale=1>
    <style>body { border: 5px solid green; padding: 0; margin: 0; }</style>
    
    <script src=http://p5js.org/js/p5.min.js defer></script>
    <script src=http://p5js.org/js/p5.dom.js defer></script>
    
    <style>
    
      #canvasHolder {
        width: 700px;
        height: 450px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
    
    </style>
    
    <div id=canvasHolder></div>
    
    <script>
    
    // http://forum.Processing.org/two/discussion/13051/
    // how-do-i-bind-p5-canvas-to-an-html-page
    
    // GoToLoop (2015-Oct-16)
    
    function setup() {
      const canvasHolder = select('#canvasHolder'),
            canvasWidth  = canvasHolder.width,
            canvasHeight = canvasHolder.height;
     
      console.log(canvasHolder);
      print(canvasWidth + ', ' + canvasHeight);
    
      createCanvas(canvasWidth, canvasHeight).parent('canvasHolder');
     
      fill('blue').stroke('red').strokeWeight(2.5).background(0).noLoop();
      rectMode(CENTER).rect(width>>1, height>>1, width>>1, height>>1);
    }
    
    </script>
    
  • Answer ✓

    @fkkcloud: I don't think select() is what you're looking for. There's a far simpler solution: look for the 'instance mode' example on this page. This allows you to specify a target element for the p5js canvas. It also has the advantage of limiting the scope of p5's core methods which otherwise are global. That's likely to be of more concern if you're rolling it into a page with other dependencies such as Angular.

    If you override the native width/height of the canvas via css I'm guessing it will just stretch, but you might want to test for unforeseen consequences: e.g. Misaligned hit detection etc...

  • I guess another reason is that, canvasHoldler id can not be selected when its within ng-view since I am using AngularJS for routing pages..

    Should I put sketch stuff in controller of that page?

  • Answer ✓

    Sorry I see that what you tried is more or less equivalent to my suggestion. I've not used angularJS (on my todo list) but if you're using it to manipulate the DOM you'll obviously have to ensure the target element is in place when you fire up p5...

Sign In or Register to comment.