Interaction between website and HTML5 canvas

Explorer ,
Nov 03, 2020 Nov 03, 2020

Copy link to clipboard

Copied

I'm wondering if someone could provide me some keywords in order to research the possibilities of interaction between a website and an embedded HTML5 canvas. What I'm specifically looking for is to start an animation on a specific frame instead of having it start on the first frame. In my naive imagination I'd have a piece of code on the website that on load tells the HTML5 canvas element on which frame to start. How would you go about something like this? 

 

Any help is appreciated!

 

-DanieL

TOPICS
How to

Views

77

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
community guidelines
Adobe Community Professional ,
Nov 03, 2020 Nov 03, 2020

Copy link to clipboard

Copied

you could open your canvas file using a query string that indicates the starting frame:

 

from your non-animate page link to your animate page and pass the query string. eg,  animate_page.html?startframe=12&var1=whatever&var2=whateverelse

 

 

in animate:

 

var startframe = parseQueryStringF("startframe");
var var1 = parseQueryStringF("var1");
var var2 = parseQueryStringF("var2");

 

function parseQueryStringF(varname) {
var queryA = window.location.search.substring(1).split("&");
for(var i=0;i<queryA.length;i++){
if(varname==queryA[i].split("=")[0]){
return queryA[i].split("=")[1];
}
}
return null;
}

 

 

 

 

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
community guidelines
Explorer ,
Nov 03, 2020 Nov 03, 2020

Copy link to clipboard

Copied

Thanks for your quick reply! I'll give that a test!

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
community guidelines
Adobe Community Professional ,
Nov 03, 2020 Nov 03, 2020

Copy link to clipboard

Copied

LATEST

you're welcome.

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
community guidelines