在网站项目中实现 html、javascript 和 canvas

我试图创建一个"手提袋"（矩形），它必须通过单击某个按钮来改变其颜色。客户必须能够在袋子（矩形）上添加他的"徽标"（一些文本）。

这两个代码都可以独立工作，但是当我将它们组合在一个脚本中时，事情就会混淆。

矩形的代码是：

var canvas=null;
var context=null;
window.onload = function() {
canvas=document.getElementById("drawing");
context=canvas.getContext("2d");
      context.beginPath();
      context.rect(100, 50, 165, 200);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'black';
      context.stroke();
}
</script>

这是用于添加文本的代码，该文本可以独立工作，但永远不会与上面的文本结合使用：

<input type="text" id="text_cnv" size="20" maxlength="12" />
<script>
function clearCanvas(cnv)
{
var ctx=cnv.getContext('2d');
ctx.beginPath();
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,cnv.width,cnv.height);
ctx.restore();
}
function addTextCnv(ctx,text,x,y,maxWidth,lineHeight)
{var words=text.split(' ');
var nr_w=words.length
var addtxt='';
for(var n=0;n<nr_w;n++)
{
var txtLine=addtxt+words[n]+' ';
var metrics=ctx.measureText(txtLine);
var txtWidth=metrics.width;
if(txtWidth>maxWidth&&n>0)
{
ctx.fillText(addtxt,x,y);
addtxt=words[n]+' ';
y+=lineHeight;
}
else addtxt=txtLine;
}
ctx.fillStyle='black';
ctx.font='bold 17px sans-serif';
ctx.fillText(addtxt,x,y);
}
var drawing=document.getElementById('drawing');
var ctx1=drawing.getContext('2d');
var maxWidth=drawing.width-250; //here we change the width of where the letters start
var lineHeight=23;
var x_pos=(drawing.width-maxWidth)/2;
var y_pos=175; //here we change the height of where the letters start
document.getElementById('text_cnv').onkeyup=function(){clearCanvas(drawing);
addTextCnv(ctx1,this.value,x_pos,y_pos,maxWidth,lineHeight);
}
</script>

多谢！