Skip to main content
TomKl
TomKl
Participant
February 3, 2020
Answered

HTML5 canvas issue when I test on mobile's browser

  • February 3, 2020
  • 1 reply
  • 1418 views

Hi

I'm working on an Animate cc project to make an HTML5 canvas page.
The issue will appear when I see the page on my mobile's browser. the issue is when I click any buttons in it then a blue transparent overlay will appear on all around of the screen and suddenly disappear. I searched about it on the internet but I couldn't find an answer to fix it. you can check the issue from the following address(please check it on your mobile browser):

My apps link 

This is the codes that I used for its click event:

thisMc=this;

dialogsArr=[thisMc.ivanDialog,thisMc.akilDialog,thisMc.xiaDialog,thisMc.maxDialog,thisMc.mariaDialog,thisMc.observeTxt];
//disapear dialogs
function disapearDialogs()
{
dialogsArr[0].alpha=0;
dialogsArr[1].alpha=0;
dialogsArr[2].alpha=0;
dialogsArr[3].alpha=0;
dialogsArr[4].alpha=0;
dialogsArr[5].alpha=0;
}
disapearDialogs();
dialogsArr[5].alpha=1;

//persons events
thisMc.ivanBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_ivan');
dialogsArr[0].alpha=1;
stage.update();
});

thisMc.akilBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_akil');
dialogsArr[1].alpha=1;
stage.update();
});

thisMc.xiaBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_xia');
dialogsArr[2].alpha=1;
stage.update();
});

thisMc.maxBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_max');
dialogsArr[3].alpha=1;
stage.update();
});

thisMc.mariaBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_maria');
dialogsArr[4].alpha=1;
stage.update();
});

I wondered if anyone knows how to fix this issue.
Please let me know if you know anything about it.

Thank you very much.

Tom

 

This topic has been closed for replies.
Correct answer ClayUUID

Let me guess, on an iPhone? Add this to your CSS:

 

canvas {
	-webkit-tap-highlight-color: transparent;
}

 

Also, learn to use loops. Your disapearDialogs() function above could be replaced with:

 

// hide every dialog except the requested one
function showDialog(d) {
	for (var i = 0; i < dialogsArr.length; i++) {
		dialogsArr[i].visible = i === d;
	}
}

 

And you don't need all the stage.update()s. The stage automatically updates itself every tick.

1 reply

C
ClayUUIDCorrect answer
Legend
February 3, 2020

Let me guess, on an iPhone? Add this to your CSS:

 

canvas {
	-webkit-tap-highlight-color: transparent;
}

 

Also, learn to use loops. Your disapearDialogs() function above could be replaced with:

 

// hide every dialog except the requested one
function showDialog(d) {
	for (var i = 0; i < dialogsArr.length; i++) {
		dialogsArr[i].visible = i === d;
	}
}

 

And you don't need all the stage.update()s. The stage automatically updates itself every tick.

TomKl
TomKlAuthor
Participant
February 3, 2020

Yes, exactly. Thanks, bro. it was a big help.

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices