I am trying to add a background image and my teacher was trying to explain what to do but it still wouldn't work.
<!DOCTYPE html>
<html>
<head>
<style>
background-image: url("https://imgur.com/sJTAxQG");
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>group project</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<audio id="myAudio">
<source src="8d82b5_Star_Wars_Main_Theme_Song.mp3" type="audio/mpeg">
</audio>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var background = new Image();
background.onload = function(){
background.src = 'https://imgur.com/sJTAxQG';
ctx.drawImage(background,0,0);
Everytime I try to run it, nothing happens
This is because your requested resource
https://imgur.com/sJTAxQGis a HTML page not a raw image (content type istext/html), and only raw image can be loaded with<img>tag or used as abackground-imagein CSS.To get a raw image, use this link instead:
https://i.imgur.com/sJTAxQG.jpeg(I found this link in the inspect menu where the website uses it to display the the image)