HTML5 canvas - Images won't draw properly

Question

I have to make a tutorial about horse riding using HTML and CSS. Although I am only a beginner, everything has been going more or less smoothly until I had to draw some images.
As you can see from the code, Canvas_1 is the biggest canvas and within its borders I have two smaller canvases, Canvas_2 and myCanvas. I need image preponsko.png to appear on myCanvas and image dresurno.png to appear on Canvas_2. The images have been scaled to fit the canvas.
When I run the complete code, only the second function, for the image dresurno.png, is working and I can see the photo within the canvas borders. The first photo does not appear.
When I delete the second function, first function which draws image preponsko.png works and the image appears. This leads me to conclusion that something in the script part of the code is wrong, but I just can't figure it out. All help is appreciated.

    <!DOCTYPE HTML>  

<HTML>

<!-- background for the whole page -->
<div id="bg">
  <img src="pozadine/pozadina_konji_slajdovi.png" alt="">
</div>

<HEAD>

<link rel="stylesheet" href="css/stil_slajdovi.css">
<link rel="stylesheet" href="css/stil.css">

<meta charset="UTF-8">

</HEAD>



<BODY>

<!-- Canvas_1 - biggest canvas, within its borders are two smaller canvases, Canvas_2 and myCanvas, are positioned -->
<canvas id="Canvas_1" width="1340" height="618" style="position:absolute; left:10px; top:8px; border:solid red;"></canvas>

<canvas id="myCanvas" width="212" height="170" style="position:absolute; left:260px; top:140px; border:3px solid red;"></canvas>
<img id="rsz" width="0" height="0" src="slike/preponsko.png" alt="">

<canvas id="Canvas_2" width="220" height="220" style="position:absolute; left:280px; top:380px; border:3px solid red;"></canvas>
<img id="res_2" width="0" height="0" src="slike/dresurno.png" alt="">

 

<a id="button_nazad" href="d_saddle_information.html" class="action-button shadow animate blue" style="position:absolute; left:171px; top:589px;">Back</a>
<a id="button_naprijed" href="f_saddle_endurance_western.html" class="action-button shadow animate yellow" style="position:absolute; left:1058px; top:589px;">Forward</a>
  

 
 
 
<SCRIPT>
  
 <!-- first function that should draw the "slike/preponsko.png" image  -->
window.onload = function() { 
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext("2d");
var img = document.getElementById("rsz");
     
context.drawImage(img, 0,0);
      
}

<!-- second function that should draw the "slike/dresurno.png" image -->
window.onload = function() {
var canvas = document.getElementById("Canvas_2");
var context = canvas.getContext("2d");
var img = document.getElementById("res_2");
     
context.drawImage(img, 0,0);
      
}


</SCRIPT>

</BODY>

Nah, not homework. And unfortunately, as a complete beginner, I have no idea what you just said. — zero_brains, Aug 21 '17 at 17:35
Ok sorry about that comment then :) [see this answer](https://stackoverflow.com/a/66434/881032) for help with your dev console — lumio, Aug 21 '17 at 17:37

score -1 · Accepted Answer · answered Aug 22 '17 at 01:01

Problem is simple to solve.

You have overwritten the window.onload function with a second function.

You have

window.onload = function(){ ...

Then below that you set the same property with a second function

window.onload = function(){ // second function

window.onload can only hold one reference and that will be to the second function.

You can fix it by just defining one function to do everything,

window.onload = function() {
    var canvas = document.getElementById("myCanvas");  
    var context = canvas.getContext("2d");
    var img1 = document.getElementById("rsz");         
    context.drawImage(img1, 0,0);

    canvas = document.getElementById("Canvas_2");
    context = canvas.getContext("2d");
    var img2 = document.getElementById("res_2");         
    context.drawImage(img2, 0,0);

}

or better is to create two render functions and call them from the one onload event

// waits for page to load
window.onload = function() {
    renderImage("Canvas_1", "rsz");  // draw first image
    renderImage("Canvas_2", "res_2"); // draw second image
}

// gets a canvas with id = canvasId and draws the image with id = imageId
function renderImage(canvasId, imageId){
    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext("2d");
    const img = document.getElementById(imageId);         
    ctx.drawimage(img,0,0);
}

HTML5 canvas - Images won't draw properly

1 Answers1