Highlighted

Responsive HTML5 Canvas with max width?

Explorer ,
May 29, 2019

Copy link to clipboard

Copied

Hello,

I am creating interactive educational lessons using Animate HTML5 Canvas. Although I am optimizing my artwork (no filters, shadows, etc.) my animations are dragging/playing slow when the program is viewed in a browser in full screen mode (especially with Chrome browser). My animations play fine at normal browser window size, however my programs will most likely be viewed at full screen mode. My animate timeline is set to 24 fps.  I am publishing my animate file to be responsive (via the publish settings dialogue box), and I am also including a button on the screen with this code to allow the user to easily enter Full Screen mode:

this.fullscreen.addEventListener("click", toggleFullscreen);

function toggleFullscreen(event) {

  var element = document.body;

    if (event instanceof HTMLElement) {

        element = event;

    }

    var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;

    element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function () {

        return false;

    };

    document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function () {

  return false;

    };

    isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();

}

My question: Is it possible to somehow include a max-width property for my canvas so that when the user enters Full Screen mode on their browser (via the button or the browser view options), my canvas will NOT get larger than the max-width that I determine (this max-width will be smaller than the full window size at full screen so that my program plays without drag...when it is too big the drag happens)? Thank you in advance!

Views

322

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive HTML5 Canvas with max width?

Explorer ,
May 29, 2019

Copy link to clipboard

Copied

Hello,

I am creating interactive educational lessons using Animate HTML5 Canvas. Although I am optimizing my artwork (no filters, shadows, etc.) my animations are dragging/playing slow when the program is viewed in a browser in full screen mode (especially with Chrome browser). My animations play fine at normal browser window size, however my programs will most likely be viewed at full screen mode. My animate timeline is set to 24 fps.  I am publishing my animate file to be responsive (via the publish settings dialogue box), and I am also including a button on the screen with this code to allow the user to easily enter Full Screen mode:

this.fullscreen.addEventListener("click", toggleFullscreen);

function toggleFullscreen(event) {

  var element = document.body;

    if (event instanceof HTMLElement) {

        element = event;

    }

    var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;

    element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function () {

        return false;

    };

    document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function () {

  return false;

    };

    isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();

}

My question: Is it possible to somehow include a max-width property for my canvas so that when the user enters Full Screen mode on their browser (via the button or the browser view options), my canvas will NOT get larger than the max-width that I determine (this max-width will be smaller than the full window size at full screen so that my program plays without drag...when it is too big the drag happens)? Thank you in advance!

Views

323

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 29, 2019 0
Adobe Community Professional ,
May 29, 2019

Copy link to clipboard

Copied

Resolution shouldn't matter much, since all line-drawing and bitmap-painting operations are handled natively in the browser. It sounds like you ARE doing something that requires per-pixel JavaScript code to draw.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0
Explorer ,
May 29, 2019

Copy link to clipboard

Copied

Yes I am very confused at why my program is running so slow when viewed at large dimensions. I am using simple vector art without filters and some optimized bitmaps. This art is in symbols that animate using Classic Tweens in the timeline. I have some interactivity in mouse events such as Drag and Drops, HitTests, etc. I have run the HTML5 Canvas report and no object is extremely large memory wise. How can I test what you are saying? How can I see what is requiring the per-pixel JavaScript code to draw?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0
Explorer ,
May 29, 2019

Copy link to clipboard

Copied

I should add that my large background art are optimized .jpgs and most of my movieclips are made up of simple vector art. Is the vector art the problem?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0
Adobe Community Professional ,
May 29, 2019

Copy link to clipboard

Copied

Try running Chrome's JavaScript profiler and see where it's spending most of its time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 1
Explorer ,
May 29, 2019

Copy link to clipboard

Copied

Screen Shot 2019-05-29 at 11.01.50 PM.png
Could you point me to a resource that helps me to understand what this all means?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0
Adobe Community Professional ,
May 29, 2019

Copy link to clipboard

Copied

You know, showing the Summary tab would be ever so much more helpful.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0
Explorer ,
May 30, 2019

Copy link to clipboard

Copied

Screen Shot 2019-05-30 at 10.13.54 AM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 30, 2019 0
Explorer ,
May 30, 2019

Copy link to clipboard

Copied

I should revise my question: My issue is that my program, when played at full screen on the browser, is extremely slow and dragging. I am not sure what is causing this. I use simple vector art (with no filters) in movieclips with timeline animation, and I use bitmap images for my large backgrounds. Thanks in advance.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 30, 2019 0
Adobe Community Professional ,
May 30, 2019

Copy link to clipboard

Copied

It sure looks like JavaScript is really really busy doing something. You should start removing things until you isolate what's causing it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 30, 2019 0
Explorer ,
May 31, 2019

Copy link to clipboard

Copied

Clay, I appreciate your help. To see if I could get the program to play at normal speed while viewed in full screen mode in the browser, I shortened my Animate file to only one frame on the timeline instead of 6, eliminated nearly 80% of nested movieclips that included javascript, converted most of the complicated vector artwork to bitmap, and the program STILL ran super slow on the browser at full screen mode (the worst drag is in Chrome). This is the summary I got of my trimmed down test file. I think I am going to start a new post, specifying my issue, now that I know what it is: I am experiencing extremely slow fps (dragging animations) when Animate's HTML5 Canvas is played on a browser in full screen mode (especially Chrome).Screen Shot 2019-05-31 at 1.40.10 PM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Explorer ,
May 31, 2019

Copy link to clipboard

Copied

My question has changed from how to add a max-width to my canvas to prevent animation drag when viewed in large browser modes, to simply how to FIX the drag issue itself on large screen browser modes and I have moved the post, more clearly stated, here: Slow, dragging animation when Animate HTML5 Canvas is played in full screen browser

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 1