I was trying to make a simple multiplechoice quiz with HTML5 and JavaScript using this tutorial, so now I have this:

Code:
<!DOCTYPE HTML>

<html lang="en">
    <head>

		<meta charset="utf-8">
		<title>title</title>
		<link rel="stylesheet" href="design/css/stylesheet.css" />
		
        <script>
        
            window.onload = function(){

                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
				var quizbg = new Image(); // bg
				
				var Question = new String; // question
				var Option1 = new String; // options
				var Option2 = new String;
				var Option3 = new String;
				
				var mx = 0; // reference mouseclick variables
				var my = 0;
				
				var CorrectAnswer = 0; // hold the reference to the correct answer (1, 2, 3)
				var qnumber = 0; // track the current question number
				var rightanswers = 0; // calculate the score by storing the number of questions that the user got right and wrong
				var wronganswers = 0;
				var QuizFinished = false; // help track when the quiz is complete
				var lock = false; // lock answer so user can't click on more than one
				
				// important to keep track of the position of everything we draw
				var textpos1 = 45;
				var textpos2 = 145;
				var textpos3 = 230;
				var textpos4 = 325;
				
				var Questions = [
								"Where is Paris?",
								"Where is London?",
								"Where is Rome?"
								];
								
				var Options = 	[
								["France","Belgium","Norway"],
								["England","China","Denmark"],
								["Italy","Brazil","Canada"]
								];

				quizbg.onload = function(){ // only load questions when bg image is loaded
			      context.drawImage(quizbg, 0, 0);
				  SetQuestions();
				}//quizbg
				quizbg.src = "quizbg.png";

				SetQuestions = function(){ // set questions and draw them on canvas

					Question=Questions[qnumber]; // select the current question from the array, and assign it to the string variable question
					CorrectAnswer=1+Math.floor(Math.random()*3); // select a random number, from 1 to 3 and assign it to CorrectAnswer

					if(CorrectAnswer==1){Option1=Options[qnumber][0];Option2=Options[qnumber][1];Option3=Options[qnumber][2];}
					if(CorrectAnswer==2){Option1=Options[qnumber][2];Option2=Options[qnumber][0];Option3=Options[qnumber][1];}
					if(CorrectAnswer==3){Option1=Options[qnumber][1];Option2=Options[qnumber][2];Option3=Options[qnumber][0];}

					context.textBaseline = "middle"; // text centered in boxes
					context.font = "24pt Calibri, Arial"; // font for question
					context.fillText(Question, 20,textpos1); // place our Question text 20 pixels from the right and 45 pixels (textpos1=45) from the top of the canvas
					context.font = "18pt Calibri, Arial"; // smaller font for options
					context.fillText(Option1, 20, textpos2);
					context.fillText(Option2, 20, textpos3);
					context.fillText(Option3, 20, textpos4);


				} // end SetQuestions

				canvas.addEventListener('click',ProcessClick,false);  // listens out for a mouseclick and then acts on it

				function ProcessClick(ev) { // if mouseclick (mouseclick event = ev)
					my=ev.y-canvas.offsetTop; // my to store the mouseclick y-coordinate
					if(ev.y == undefined){
						my = ev.pageY - canvas.offsetTop;
				}

					if(lock){ // variable ‘lock’ to determine whether the question has been answered or not
						ResetQ();
					}
		
					else{
		
					if(my>110 && my<180){GetFeedback(1);} // coördinates options
					if(my>200 && my<270){GetFeedback(2);}
					if(my>290 && my<360){GetFeedback(3);}
		
					}//!lock

				}//ProcessClick

		GetFeedback = function(a){

		  if(a==CorrectAnswer){ // ‘a’ variable when we call the function corresponds to the variable passed to the function earlier, it will be 1,2 or 3 depending on which option was clicked
		  	// the variable CorrectAnswer holds the correct answer. Hence if a==CorrectAnswer then the answer is correct, otherwise (else) the answer is wrong
		  	context.drawImage(quizbg, 0,400,75,70,480,110+(90*(a-1)),75,70); //  take our original image and ‘slice’ off the tick graphic and place it on the screen
			rightanswers++;
			//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
		  }
		  else{
		    context.drawImage(quizbg, 75,400,75,70,480,110+(90*(a-1)),75,70); //  take our original image and ‘slice’ off the tick graphic and place it on the screen
			wronganswers++;
		  }
		  lock = true;
		  context.font = "14pt Calibri,Arial";
		  context.fillText("Click again to continue",20,380);
		}//get feedback


		ResetQ = function(){ // resets our quiz and move onto the next question
		lock = false;
		context.clearRect(0,0,550,400); // clear the entire canvas away
		qnumber++;
		if(qnumber==Questions.length){EndQuiz();} // means the last question has been reached and we should end the quiz with the function EndQuiz(); Otherwise (else), we need to redraw the quiz background using drawImage() and then call the function SetQuestions()
		else{
		context.drawImage(quizbg, 0, 0);
		SetQuestions();}
		}


		EndQuiz=function(){
		canvas.removeEventListener('click',ProcessClick,false);
		context.drawImage(quizbg, 0,0,550,90,0,0,550,400);
		context.font = "20pt Calibri,Arial";
		context.fillText("You have finished the quiz!",20,100);
		context.font = "16pt Calibri,Arial";
		context.fillText("Correct answers: "+String(rightanswers),20,200);
		context.fillText("Wrong answers: "+String(wronganswers),20,240);
		}
			}; //windowonload

        </script>


    </head>
    <body>

    <div id="container1">
		<canvas id="myCanvas" width="550" height="400"></canvas>
    </div>

</body>
</html>
So since I just followed the tutorial, everything works. So it always shows a question and three answers. But I just simply want to show a question, three answers and an image (this image is kind of some aid to help solve the question). I never worked with JavaScript before so I have no idea how to even start on this. I tried making a variable and in this array put all the images like with the "Questions" and "Options" but how do I make it display at the correct question?