Getting Noodl canvas size

Hi, I was wondering if there’s a good way to get back the Noodl canvas size. Not the resolution setting but the actual pixel size of the canvas within a browser window.

Thanks!

I used Javascript to get the canvas size, not sure if this is what you were looking for.

1 Like

Perfect! Just what I’m looking for.

Now to extend this into an event listener (on resize), would this be a correct way of doing it? I’m putting this in the setup. I get the results fine. I’m just trying to figure out this whole _self _this thing in JS which is totally bizarre :slight_smile:

var self = this;
window.onresize = function(event) {
    if(canvas && canvas.length >= 1) {  
        outputs.width = canvas[0].width;
        self.flagOutputDirty("width");

        outputs.height = canvas[0].height;
        self.flagOutputDirty("height");
    }
};

Oh and if you have a good reference on the topic [self/this] I’d really appreciate it :smiley:

aha, so I guess this only works if the project is set to “Fill” mode. It does not work if it’s set to “Aspect fit”. Seems like it returns a fixed value then (of the setup size). Any workaround for this?

Thanks!

canvas.width will give you the resolution of the frame buffer or bitmap that the canvas uses internally. canvas[0].style.width will give you the size of the canvas in css pixels (as a string with a px added at the end).

So I think you’re after this behavior:

setup: function(inputs, outputs) {
   var canvas = document.getElementsByTagName('canvas');
        
   var self = this;
   function updateSize() {
      outputs.width = canvas[0].style.width.slice(0,-2);
      self.flagOutputDirty("width");
    
      outputs.height = canvas[0].style.height.slice(0,-2);
      self.flagOutputDirty("height");
   }
                
   window.addEventListener('resize', updateSize, false);
   updateSize();
}