How do I get the current canvas size?

  • Hi Guys,

    How can I get the size of actual canvas either in events or script?

    When you run debug mode, under System it has a variable "Canvas Size" showing something like a vector2 - 889 x 500 for example.

    This value changes as you resize the navigator window so a reference type would be preferred.

    All I can find in the events is the Viewport sizes and some conversion methods.

    What I'm trying to do is calculate if the mouse is near the edge of the canvas element,

    something like

    if (mouse.AbsoluteX >= (canvas.width -5) {

    //then I know the mouse near the right edge

    }

    and so on.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Found my own solution:

    Create a variable in an event sheet called canvasWidth.

    Then, On start of layout or wherever add Action:

    Set canvasWidth to browser.ExecJS("document.querySelector('canvas').width")

    put the "browser.ExecJS("document.querySelector('canvas').width)"

    it seems to return the width value through the ExecJS function and stores it in the variable.

    NOTE: this could be a security risk as it is direct DOM access, if you don't know what that means don't use this.

  • oh yeah and just replace 'width' with height to get the height duh

  • why you dont use Mouse.X instead of absoluteX ?

    then you do not need to know the canvas size...

  • PlatformInfo.CanvasCssWidth

    PlatformInfo.CanvasCssHeight

  • hugone - because in this use case it is easier to work with an integer.

    calminthenight - thanks this is exactly what I was looking for and it's much easier than wrangling a query on the DOM.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)