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

Question

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

//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();