canvas里我想给制作的多个图形加图片背景，怎么实现

Question

<script type="text/javascript">var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");var bags=[]var img=new Image(); img.src="img/redbag.png";window.onload=function(){ canvas.width=800; canvas.height=800; for(var i=0;i<3;i++){ var bag={x:Math.random()*canvas.width,y:Math.random()*canvas.height} bags[i]=bag; } draw(); canvas.addEventListener("mouseup",change)}function change(){ var x=event.clientX-canvas.getBoundingClientRect().left; var y=event.clientY-canvas.getBoundingClientRect().top; draw(x,y);}function draw(x,y){ context.clearRect(0,0,canvas.width,canvas.height) for(var i=0;i<bags.length;i++){ context.beginPath(); context.rect(bags[i].x,bags[i].y,60,60); var pat=context.createPattern(img,"repeat") context.fillStyle=pat; context.fill(); if(context.isPointInPath(x,y)){ context.fillStyle="red"; context.fill(); } }} </script>