Hey koobcoding, thanks for posting!
Check out the following CodePen I made a while back, it gives a good example of how a cannon is coded to shoot projectiles out of the end of it: https://codepen.io/chriscourses/pen/PzRABR
Basically, you're going to want to focus on the
atan2 function, it determines the angle the cannon should be turned, and the angle the ball should be shot from so you always get the effect of a cannonball coming out of the cannon's barrel.
For loading images, you'll want to use the canvas'
c.drawImage(image, x, y);
image here is the URL to your image while
const img = new Image() img.src = './yourPath.png' c.drawImage(img, 100, 100);
Hope that helps clear up at least a little bit, will have a course on loading images when the sidescroller game release comes out.