Javascript functions for Canvas not working

[Brian M]

I have created a codepen that draws on the canvas and used a javascript addEventListener to capture the mouse clicks. I think that not working properly is my issue. What would be the proper procedure to grab a codepen sample and serve it up in the framework properly?

I am still on the learning curve of how to use Web2Py but have simply been modifying the standard welcome app to play around. If any of the following steps are not the best way to do this please let me know.

1) under static/js I added a file called canvas.js which is the contents of the javascript codepen https://codepen.io/brian2222/pen/ZBJLyp 

2) I added the following code to default/index.html (I left a few lines above and blelow my edit so it is easier to see the edits) The two key lines are the canvas and the script tag right below it.

{{elif 'content' in globals():}}
{{=content}}
{{elif 'form1' in globals():}}
<table><tr><td>
<canvas id="canvas" width="400" height="400" style="border:solid 1px #ddd;display: block;left: 50%;margin: -200px -200px 0 -200px;position: absolute;top: 50%;"></canvas>
<script src="{{=URL('static','js/canvas.js')}}"></script>
</td><td>
<h3>Read Voltage</h3>
{{=form1}}
<h3>Write Voltage</h3>
{{=form2}}
</td></tr>
</table>
<h3>Response Toolbar</h3>
{{=response.toolbar()}}
{{else:}}
{{=BEAUTIFY(response._vars)}}

3) I already had the form1 and form 2 stuff working, so this is not part of the issue. My goal was to simply get the codepen working. The idea is that it draws the boxes and buttons and then allows one to click on them to change their color for now, ajax later will eventually make this useful.
4) The canvas is drawn the first time from the line: document.onload=reDraw(); This line of code is in the canvas.js file and so makes me think it runs fine so why isn't the next line?
5) The clicks are not captured with the event listener, the following line: canvas.addEventListener("click",myClick);
6) Although I am learning a lot at once, I do have confidence the Canvas stuff works as it works on codepen. And when served up statically from my own computers web server.
7)I am not at all familiar with how to use Bootstrap, is this js somehow stopping my event listener from running? Is there a good link/video to get an overview of how bootstrap works in the web2py framework specifically as this would be more valuable than learning bootstrap on its own?
 
Thanks for the help

[Brian M]

In case others have this sort of a problem where javascript events are affected by the css of bootstrap...

The problem was in the css file:  bootstrap.min.css

Somehow the relative position causes the event not to bubble up. How jacked up is that?

.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}

[Dave S]

Interesting.   Massimo has examples of web2py usage that don't use bootstrap ... he's worked up stupd.css for these;  the bundled app at web2py/application/examples is the online book using stupid.css.  There are also some sample pages as part of the github for stupid.css 

<URL:https://github.com/mdipierro/stupid.css>

I don't know how much you're committed to the current views, or if you still have the option of trying the lighter css.  But you can check it out if you want.

/dps

[Niphlod]

it'd be hardly an issue with bootstrap itself given bootstrap "share" among websites