Javascript 为什么我的多个元素不能在html画布上绘制？

在firefox中，如果我注释掉所有其他内容并注释掉或取消注释背景，则只会看到其中一个，以最后一次渲染相对的为准。在铬我可以有两个，但他们都只是黑色填充。我希望在我计划添加xy坐标参数时，能够在js文件中调用这些函数。这可能吗？我下一步该去哪里？我想实现的基本思想是能够在页面的某些位置绘制由onClick事件生成的彩色圆圈。问题是否仅仅源于使用图像模式而不是颜色填充？我是否从根本上误解了canvas标记应该如何工作

//get canvas and context
var my_board = document.getElementById('canvas');
var my_context = my_board.getContext('2d');

//make red stone pattern
function red_stone(){
    var redpat = new Image();
    redpat.src = 'redpat.png';
    var redfill = my_context.createPattern(redpat, 'repeat');

    my_context.fillStyle = redfill;
    //my_context.fillStyle = '#216263';
    my_context.strokeStyle = '#A9B83D';
    my_context.beginPath();
    //my_context.moveTo(25,25);
    my_context.arc(75,75,50,0,Math.PI*2);
    my_context.fill();
}
red_stone();

function blu_stone(){
    //make blue stone pattern
    var blupat = new Image();
    blupat.src = 'blupat.png';
    var blufill = my_context.createPattern(blupat,'repeat');

    my_context.fillStyle = blufill;
    //my_context.fillStyle = '#216263';
    my_context.strokeStyle = '#A9B83D';
    my_context.beginPath();
    my_context.arc(225,75,50,0,Math.PI*2);
    my_context.fill();
}
blu_stone();

---

使用颜色作为填充样式时会发生什么情况？在JS Fiddle中的FF上运行它似乎是可行的。如果我只切换了fillstyle，它就不起作用了。如果我注释掉第二个createPattern，它将渲染两个圆。我不能多次使用createPattern吗？如果我只使用一个填充图案的圆圈，那么更改画布css背景的必要性仍然存在。repat.png和blupat.png是我使用gimp制作的25px图像。我可能只是切换到使用固体填充，因为它似乎工作正常，但我真的很好奇，如果有人知道什么是正在进行的模式填充。我知道微软确实在IE中推动html5标准兼容，但使用linux很难利用这一点。有人知道这些问题是否在IE9/10/11中得到了解决吗？映像的加载是异步的。在设置src之前，必须钩住映像的onload事件。因此，在启动应用程序之前，请预装两张图像。之后，你会看到是否还有问题。