javascript show images on canvas

I have multiple image coordinates saved in a database.  I want to pull out the values with a php script.  The following works, but I want to make it more efficient with php loop.  I am currently using two queries to make it work and I think there would be a better way than how I am doing it.  I still need to make sure the images have loaded first.  It would be good to get advice.

<script type="text/javascript">
      window.onload = function() {
            var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var IsImage1Loaded = false;
var IsImage2Loaded = false;

var img=new Image()
img.src="background.jpg";
var secimage=new Image()
secimage.src="../images/<?php echo $_GET['img'];?>.png";
img.onload = function() {
IsImage1Loaded = true;
if(IsImage2Loaded) finalCallback();
}

secimage.onload = function() {
IsImage2Loaded = true;
if(IsImage1Loaded) finalCallback();
}
function finalCallback(){
  document.getElementById('loader').style.display = 'none';
    cxt.drawImage(img,0,0);
      <?php $thenumb = 1;?>
<?php do { ?>
var secimageXcoord<?php echo $thenumb++;?> = <?php echo $row_rssignplace['coordx']; ?>-20;
var secimageYcoord<?php echo $thenumb++;?> = <?php echo $row_rssignplace['coordy']; ?>-40;      
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
<?php $thenumb = 1;?>
<?php do { ?>
                        cxt.drawImage(secimage,secimageXcoord<?php echo $thenumb++; ?>,secimageYcoord<?php echo $thenumb++; ?>);
  <?php } while ($row_Recordset2 = mysql_fetch_assoc($Recordset2)); ?>       
};
      }
            </script>