Canvas Background - Is it Possible?
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Canvas Background - Is it Possible?
Hi All,
I would like to add that background canvas in my project:
http://joanclaret.github.io/html5-canvas-animation/
If possible, in a GLOBAL mode (I mean, one set to entire website pages), but if doesn't, no problem at all.
I tried to put this within HTML tool and within PAGE HTML property - but I got no success at all.
Can anyone help me?
Thanks in advance.
I would like to add that background canvas in my project:
http://joanclaret.github.io/html5-canvas-animation/
If possible, in a GLOBAL mode (I mean, one set to entire website pages), but if doesn't, no problem at all.
I tried to put this within HTML tool and within PAGE HTML property - but I got no success at all.
Can anyone help me?
Thanks in advance.
Re: Canvas Background - Is it Possible?
If the code works in another page then it will also work in a WWB page.
If the code foes not work then either there is an error in the code or a conflict with other code on the page.
Related tutorial:
http://wysiwygwebbuilder.com/add_html.html
If the code foes not work then either there is an error in the code or a conflict with other code on the page.
Related tutorial:
http://wysiwygwebbuilder.com/add_html.html
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Thanks Pablo, I will try your recommended solution.
I'll be back soon with some report.
I'll be back soon with some report.
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Pablo, I sent to your mailbox the link of a ZIP with the code I want to add in my pages.
I guess the problem can be related to the lack of a position set to "Before </HTML>".
I tried all positions within the PAGE HTML settings and I had no result...
I tried also put it into a <DIV> using the <HTML> control.
Basically I want to set this as my default background in all pages and even if I have to replicate it on all pages, no problems.
If you could help me to get a solution, I will appreciate a lot.
Thank you!
I guess the problem can be related to the lack of a position set to "Before </HTML>".
I tried all positions within the PAGE HTML settings and I had no result...
I tried also put it into a <DIV> using the <HTML> control.
Basically I want to set this as my default background in all pages and even if I have to replicate it on all pages, no problems.
If you could help me to get a solution, I will appreciate a lot.
Thank you!
Re: Canvas Background - Is it Possible?
I'm sorry but I cannot help you with third party code. For me it may also take several hours to figure out how this works.
However the problem is not related to WWB.
Tips:
Script links and definitions should go between the head tags.
Visible code should either be in an HTML object or between the body tags.
However the problem is not related to WWB.
Tips:
Script links and definitions should go between the head tags.
Visible code should either be in an HTML object or between the body tags.
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
I understand Pablo.
I had done exactly what you recommend... but no success at all.
Anyway, thank you again to try a help.
Kindest regards,
David
I had done exactly what you recommend... but no success at all.
Anyway, thank you again to try a help.
Kindest regards,
David
Re: Canvas Background - Is it Possible?
What did you exactly?
What is the error?
What is the error?
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Pablo,
I put the <STYLE> and <SCRIPT> tags into <HEAD> section.
I put the following in the <BODY> section:
I set the PAGE PROPERTIES to BACKGROUND = Transparent.
When I make a PREVIEW, simply the page functions as a charm but without any color, effect and background.
Since all other codes run 100% (CSS3 and EVENTS) I can see that I'm not facing any "code error" or duplicate script.
I tried also to take off the call of JQUERY (since project has its own call) and the effect is the same...
And if I put the CANVAS code within a <HTML> control, I had no effect at all - same behaviour.
Thank you for asking.
I put the <STYLE> and <SCRIPT> tags into <HEAD> section.
Code: Select all
<style>
#canvas{
width: 100vw;
height: 100vh;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.canvas-wrapBG{
position:relative;
width: 100vw;
height: 100vh;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -9999;
}
</style>
<script src="three.min.js"></script>
<script src="projector.min.js"></script>
<script src="canvas-renderer.min.js"></script>
<script src="3d-lines-animation.js"></script>
<script src="jquery-3.2.1.slim.min.js"></script>
<script src="color.js"></script>
Code: Select all
<section class="canvas-wrapBG">
<div id="canvas" class="gradient">
</div>
</section>
When I make a PREVIEW, simply the page functions as a charm but without any color, effect and background.
Since all other codes run 100% (CSS3 and EVENTS) I can see that I'm not facing any "code error" or duplicate script.
I tried also to take off the call of JQUERY (since project has its own call) and the effect is the same...
And if I put the CANVAS code within a <HTML> control, I had no effect at all - same behaviour.
Thank you for asking.
- BaconFries
-
- Posts: 5369
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Canvas Background - Is it Possible?
Just as Pablo I am not really offering any help but more of a question to you. What is the following jQuery?
<script src="jquery-3.2.1.slim.min.js"></script> this is not part of the original scripts in the download so why are you using? You should only use the scripts that you downloaded as adding others can break it as it may not be compatible with the other files. Remove this and only use the scripts/ files that came in the download.
<script src="jquery-3.2.1.slim.min.js"></script> this is not part of the original scripts in the download so why are you using? You should only use the scripts that you downloaded as adding others can break it as it may not be compatible with the other files. Remove this and only use the scripts/ files that came in the download.
Re: Canvas Background - Is it Possible?
Did you also publish the script files to the same folder as the page?
Note that you can view script errors in the debugger of your browser (F12)
Note that you can view script errors in the debugger of your browser (F12)
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Hi Baconfries, thank you for help too.
The page does not execute the function as expected EVEN if I take off the JQuery.
I utilize here as default the "JQuery-3.2.1.min" and this one (Slim) was downloaded from the JQuery official page.
Anyway, even completely erasing this line of call, the behaviour is the same - no error in any other script/effect, but this specific one does not run.
Pablo, I did the test you recommend also. I loaded the scripts from basefolder (and they are there) and from the Threejs folder. I had put them also in the SCRIPTS folder I have here and changed the load instruction to reflect that new folder.
In time: I have CHARTJS scripts also loading 100%. The page plots these charts without any problem. Only the background is not functioning.
Pablo, I will test F12 and return in minutes...
The page does not execute the function as expected EVEN if I take off the JQuery.
I utilize here as default the "JQuery-3.2.1.min" and this one (Slim) was downloaded from the JQuery official page.
Anyway, even completely erasing this line of call, the behaviour is the same - no error in any other script/effect, but this specific one does not run.
Pablo, I did the test you recommend also. I loaded the scripts from basefolder (and they are there) and from the Threejs folder. I had put them also in the SCRIPTS folder I have here and changed the load instruction to reflect that new folder.
In time: I have CHARTJS scripts also loading 100%. The page plots these charts without any problem. Only the background is not functioning.
Pablo, I will test F12 and return in minutes...
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Ops!
Yes Pablo, you are right. I have here ERR_FILE_NOT_FOUND.
My steps here:
1- In SITE MANAGER I pressed right-button and create a FOLDER (threejs)
2- In this folder I had IMPORTED EXTERNAL FILES (the scripts)
3- I see here IN SITE MANAGER the folder and below it (within it), all scripts.
4- But, when I open the location of my project, I don't see that folder.
Anyway, I see all scripts in the "base-folder" of the project (the main foder).
Even changing the load instruction like these:
I continue to get "ERR_FILE_NOT_FOUND in F12 of Chrome...
NOTE: other scripts like CHARTJS are being loaded from its own folder and I see the same in SITE MANAGER ("scripts" folder).
Thank you BOTH to try help me!!
Yes Pablo, you are right. I have here ERR_FILE_NOT_FOUND.
My steps here:
1- In SITE MANAGER I pressed right-button and create a FOLDER (threejs)
2- In this folder I had IMPORTED EXTERNAL FILES (the scripts)
3- I see here IN SITE MANAGER the folder and below it (within it), all scripts.
4- But, when I open the location of my project, I don't see that folder.
Anyway, I see all scripts in the "base-folder" of the project (the main foder).
Even changing the load instruction like these:
Code: Select all
<script src="three.min.js"></script>
<script src="projector.min.js"></script>
<script src="canvas-renderer.min.js"></script>
<script src="3d-lines-animation.js"></script>
<script src="color.js"></script>
NOTE: other scripts like CHARTJS are being loaded from its own folder and I see the same in SITE MANAGER ("scripts" folder).
Thank you BOTH to try help me!!
- BaconFries
-
- Posts: 5369
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Canvas Background - Is it Possible?
Note then your issue may or will be jQuery conflicts. You mention that you are using Charts.js using jQuery I take it? if so then there will be conflicts as you can only have one version on the page at one time and both scripts will need the same version. This means is charts using for talking sake v2.2.0 then then the script you are using using needs the same.
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Hi Bacon,
CHARTJS is not using JQuery ...
I notice a curious thinkg here:
- I load the CHARTJS in this page normally in <HEAD> section. But Chrome reports FILE_NOT_FOUND.
- But ALL charts here are functioning normally and the load of this script is just performed once.
Anyway, the other scripts to background are not functioning as should and Chrome reports also FILE_NOT_FOUND, even I seeing them in the base-folder and adapting the LOAD of them to this.
Baconfries, would like to view the scripts I'm trying to add here?
CHARTJS is not using JQuery ...
I notice a curious thinkg here:
- I load the CHARTJS in this page normally in <HEAD> section. But Chrome reports FILE_NOT_FOUND.
- But ALL charts here are functioning normally and the load of this script is just performed once.
Anyway, the other scripts to background are not functioning as should and Chrome reports also FILE_NOT_FOUND, even I seeing them in the base-folder and adapting the LOAD of them to this.
Baconfries, would like to view the scripts I'm trying to add here?
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Hmmm.....
Now I'm seeing that the page is NOT LOADING really ANY script I had set in <HEAD>.
I found in some point there the following instrunction:
So, due to MY FAULT the "Chart.min" was STILL BEING LOADED from Cloudflare - and I really do not want this.
I remarked this line (using <!-- -->) and all charts stopped functioning.
So, even I using:
this script is not being loaded. Notice:
1- The folder exists in SITE MANAGER and I see the JS script within it.
2- The folder ALSO exists in my disk, below the base-folder of the project.
And I'm running the PAGE PREVIEW (Shift Preview), not entire "site preview".
So, why the script is not being loaded?
In time: I changed this line to only "src=Chart.min.js" (and the file also exists within the base-folder) and I had the same result: script was not loaded. But if I return the "Cloudflare" instrunction, the script loads normally....
Am I doing something wrong here?
Now I'm seeing that the page is NOT LOADING really ANY script I had set in <HEAD>.
I found in some point there the following instrunction:
Code: Select all
/*
* <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
*/
So, due to MY FAULT the "Chart.min" was STILL BEING LOADED from Cloudflare - and I really do not want this.
I remarked this line (using <!-- -->) and all charts stopped functioning.
So, even I using:
Code: Select all
<script src="scripts/Chart.min.js"></script>
1- The folder exists in SITE MANAGER and I see the JS script within it.
2- The folder ALSO exists in my disk, below the base-folder of the project.
And I'm running the PAGE PREVIEW (Shift Preview), not entire "site preview".
So, why the script is not being loaded?
In time: I changed this line to only "src=Chart.min.js" (and the file also exists within the base-folder) and I had the same result: script was not loaded. But if I return the "Cloudflare" instrunction, the script loads normally....
Am I doing something wrong here?
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Guys,
I see now into AppData/Local/Temp/Preview that folder SCRIPTS is not being copied there in Preview mode - and because of this I cannot really see any Javascript defined by them.
Since this folder is NOT checked to "Don't Publish", shouldn't it being copied?
Now I understand why Chrome is pointing "ERR_FILE_NOT_FOUND" - they are really absent - but functions when the script is being pointed in Cloudflare,
Is this a bug??
I see now into AppData/Local/Temp/Preview that folder SCRIPTS is not being copied there in Preview mode - and because of this I cannot really see any Javascript defined by them.
Since this folder is NOT checked to "Don't Publish", shouldn't it being copied?
Now I understand why Chrome is pointing "ERR_FILE_NOT_FOUND" - they are really absent - but functions when the script is being pointed in Cloudflare,
Is this a bug??
- BaconFries
-
- Posts: 5369
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Canvas Background - Is it Possible?
You have misunderstood me... It was not the main chart.js I was meaning but the jQuery file associated with it. As you can see it requires a understanding of scripts to able to use. Now I will try to help even though it outwith help offered.
Please make a 'New' blank page with only all the Chart files nothing else to start with test and see it it works. If it works then upload that page only for me to see this is so I can check all files used and try it with the script you wish to use and hopefully let you know.
Please make a 'New' blank page with only all the Chart files nothing else to start with test and see it it works. If it works then upload that page only for me to see this is so I can check all files used and try it with the script you wish to use and hopefully let you know.
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Thank you very much Bacon Fries.
My problem is not related to the script usage and conflicts at all.
The problem is really how to implement a special background I have here in a WB.
Anyway, I will send to you a page with:
- Several CHARTS functioning perfectly.
- Background functioning partially (only color, not the effects)
Could you please send me a valid e-mail to I provide a Google Drive link directly to you?
Or, if preferable, write to and I will return the Google Drive link.
Thanks again!
My problem is not related to the script usage and conflicts at all.
The problem is really how to implement a special background I have here in a WB.
Anyway, I will send to you a page with:
- Several CHARTS functioning perfectly.
- Background functioning partially (only color, not the effects)
Could you please send me a valid e-mail to I provide a Google Drive link directly to you?
Or, if preferable, write to and I will return the Google Drive link.
Thanks again!
- BaconFries
-
- Posts: 5369
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Canvas Background - Is it Possible?
I will contact you with my address but for now I will remove your so not to get spammed
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Great!
Thank you.
Thank you.
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Bacon,
I don't want to disturb you but your message didn't come in my email....
I don't want to disturb you but your message didn't come in my email....
- MorningLight
-
- Posts: 132
- Joined: Tue Jul 04, 2017 12:15 pm
Re: Canvas Background - Is it Possible?
Hi Guys, I had solved the problem!
The problem was related to DOM.
When I called DOM.GetElementByID() I got errors because the page was NOT entirely loaded in fact.
So, thinking about this I performed these steps:
1- I put the <STYLE> part of code into <PAGE HTML>, within <HEAD> section.
2- I created two different <HTML> controls on page.
3- In the first I put all scripts loading (except CHART, which continues in <PAGE HTML> section), setting it as "BEFORE </BODY>".
4- In the seconds <HTML> control, I put the <Section> and <Div> codes to draw the background and effect, setting it as "DO NOT USE <DIV>".
And voila!
Thank you for the efforts in help me.
The problem was related to DOM.
When I called DOM.GetElementByID() I got errors because the page was NOT entirely loaded in fact.
So, thinking about this I performed these steps:
1- I put the <STYLE> part of code into <PAGE HTML>, within <HEAD> section.
2- I created two different <HTML> controls on page.
3- In the first I put all scripts loading (except CHART, which continues in <PAGE HTML> section), setting it as "BEFORE </BODY>".
4- In the seconds <HTML> control, I put the <Section> and <Div> codes to draw the background and effect, setting it as "DO NOT USE <DIV>".
And voila!
Thank you for the efforts in help me.