Untitled

<!doctype html>
<head>
  <meta charset="utf-8">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var canvas = document.getElementById('miniMap');
    var context = canvas.getContext('2d');
    drawToken(canvas, context);
    drawMap(canvas, context);

});

  function drawMap (canvas, context) {
    mapImage = new Image();
    mapImage.src = 'foo3.png'
        mapImage.onload = function() {
            context.drawImage(mapImage, 0, 0);
        }
    }

  function drawToken(canvas, context) {
    tokenImage = new Image();
    tokenImage.src = 'equipmentToken.png'
        tokenImage.onload = function() {
            context.drawImage(tokenImage, 25, 25);
        }
  }


  </script>
  <title></title>
</head>
<body>
<canvas id ="miniMap" width="400" height="250" style="background: white; border-radius: 15px; border: 1px solid black;">

</canvas>


</body>
</html>