javascript - Jquery and canvas code not working on same external file -

javascript - Jquery and canvas code not working on same external file -

i have been mucking little bit coding using jquery , canvas (not together).

i have external javascript file , in contains;

$(document).ready(function() { /* name chooser */ var carl = ['sha', 'shads', 'cai', 'moon', 'sun', 'staffy',]; var rosie = ['mum',]; var prev; $('button').click(function() { prev = $('h2').text(); $('h2').empty().text(carl[math.floor(math.random() * carl.length)] + rosie[math.floor(math.random() * rosie.length)]).after('<p>' + prev + '</p>'); }); });

i have inline javascript canvas element;

<script> var canvas = document.getelementbyid('draw'); if(canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 800, 500); } </script>

when separated using inline javascript canvas , external file jquery works fine , expected.

when adding inline canvas javascript external file canvas element not working jquery is. javascript loaded after canvas element external javascript linked before closing body tag , furthermore if remove jquery external file canvas element begins work again.

why this?

thanks

edit

i have tried putting canvas code within jquerys document ready function , outside of , still not working. have wrapped canvas code in anonymous function still no avail , have tried selecting canvas element jquery below;

var canvas = $('canvas')[0];

but still doesn't want know. putting canvas code before jquery canvas code executes jquery doesn't, baffled! doesn't bother me keeping seperate know why happening.

thanks again.

this simple problems noted if utilize browser console. that's it! can open console pressing ctrl+shift+j:

in home page:

error: uncaught referenceerror: $ not defined solution: link jquery in source

in namechooser page:

error: uncaught typeerror: cannot read property 'getcontext' of null

the problem:

you trying manipulate div canvas, , can't context of div element. html:

<div id="wrap"> <h1>portfolio project <a href="/">:)</a></h1> <button>click here generate company name!</button> </div>

solution:

change <div> <canvas>

how avoid future problems this?

use browser console, that's it!

javascript jquery canvas