Javascript 换球'；s反弹后的颜色，使球成为图像

所以我想用HTML和Javascript制作DVD弹跳屏幕，但我很难让球成为DVD徽标，也无法在球或图像发生弹跳时更改颜色。有人知道如何将球更改为图像，并在发生反弹时更改其颜色吗

var语境；
var x=100；
变量y=100；
var-dx=5；
var-dy=2；
函数init（）
{
context=myCanvas.getContext（'2d'）；
设置间隔（抽签，20）；
}
函数绘图（）
{
//基本图像=新图像（）；
//base_image.src='dvd.png'；
//drawImage（base_image，100100）；
//弧（x，y，20，0，数学π*2，真）；
clearRect（0,060600）；
context.beginPath（）；
context.fillStyle=“#0000ff”；
//在画布上的坐标100100处绘制半径为20的圆
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
//边界逻辑
如果（x<0 | | x>600）{
dx=-dx；
context.fillStyle=“#77ff00”；
}
如果（y<0 | | y>600）{
dy=-dy；
}
x+=dx；
y+=dy；
}
//

给你。我编辑了你的代码

var语境；
var x=100；
变量y=100；
var-dx=5；
var-dy=2；
var图像；
var图像_高度=100；
var图像_宽度=100；
var myCanvas；
函数init（）
{
myCanvas=document.getElementById（“myCanvas”）；
context=myCanvas.getContext（'2d'）；
图像=新图像（）；
image.onload=函数（）{
绘图图像（图像、x、y、图像宽度、图像高度）；
}
image.src=”https://img.icons8.com/ios/452/dvd-logo.png";
设置间隔（抽签，20）；
}
函数绘图（）
{
clearRect（0,060600）；
drawImage（图像，x，y，100100）；
context.globalCompositeOperation=“来源于”；
//画颜色
var right_bound=600-图像宽度；
var bottom_bound=600——图像高度；
//边界逻辑
if（x<0 | | x>右|界）{
dx=-dx；
context.fillStyle=“#09f”；
}
if（y<0 | | y>底界）{
dy=-dy；
context.fillStyle=“#ff0”；
}
fillRect（0,060600）；
//重置回默认的全局组合
context.globalCompositeOperation=“源代码结束”；
x+=dx；
y+=dy；
}