你这个如果路径没错误的话，代码应该是完全执行了，页面显示一个大黑块吧，只是你要的效果你的代码实现不了，需要改下的。
外面灰色框是 canvas 的样式设置的边框线，JS调用你随便了，下面是我测试的。
<canvas id="canvas" width="500" height="300" style="border:1px solid #c3c3c3"></canvas><script type="text/javascript">
draw('canvas')
function draw(id){
var canvas =document.getElementById(id)
var context =canvas.getContext('2d')
context.lineWidth =5
context.strokeStyle ="#f60"
context.strokeRect(5,5,400,200)
context.fillStyle ="#000"
context.fillRect(5,5,400,200)
}
</script>
注意：
1、画方形的起始结束位置不要大于你本身的 canvas 宽高，不然看什么效果。
2、另外strokeStyle 对 strokeRect 生效，fillStyle 对 fillRect 生效，混用或少用是没用的。
1、你单独写的一个js文件的话，所引用的jsp页面需要进行类似java中导入2、导入的语句为：<pre t="code" l="js">script type=text/javascriptsrc=js/demo.js/3、以上src为你js文件所放在WEB-INF文件夹 下面 js文件夹的demo.js的文件4、还有，如果你引入了jQuery.js包，那么第2条那条语句，一定要放在引用jquery.js包语法之后，否则不会起作用1、直接在src中输出<script src= "<?php echo base_url()?>.resource/aaa.js"></script>
2、借用base标签
将base_url（）的输出放在<base href = "<?php echo base_url()?>"/>标签里面，这样在页面里面调用比较方便，如下:
<base href = "<?php echo base_url()?>"/>
<script src= "resource/aaa.js"></script>
