I am currently in the process of creating a very basic canvas element. The idea is to allow users to choose between two images and have their selection appear on the canvas when clicked. However, I am facing some challenges with making it work.
I have verified that the image names are correct.
Is there anyone who can offer assistance?
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var selectedUtensil = document.getElementById("photos");
var tableclothColor="#ff0000";
function drawEverything(){
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
//plate
context.drawImage(plateImage,0,25);
//utensil
if(selectedUtensil == "forkknife") {
context.drawImage(forkKnifeImage,0,25);
}
else if (selectedUtensil == "chopsticks") {
context.drawImage(chopsticksImage,0,25);
}
}
window.onload = function() {
drawEverything();
}
function change() {
tableclothColor = document.getElementById("tablecloth").value;
drawEverything();
}
var plateImage = new Image();
plateImage.src='plate.png';
var forkKnifeImage = new Image();
forkKnifeImage.src='img/image1.jpg';
var chopsticksImage = new Image();
chopsticksImage.src='img/image2.jpg';
</script>
</div>
<div class="footer">
</div>