JSFiddle - React, Tailwind, and code Playground

by Olayinka Otuniyi

HTML

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> My Canvas! </title>
    
    
    </head>
<body>
    <canvas id="paper" width="1200" height="600" style = "boarder: 1px solid gray";>
    Get Chrome to view Canvas!!! 
    </canvas>
    <script src= "Fight.js"></script>
    </body>
    <h1>  </h1>
</html>

JavaScript

window.onload=function(){
    var x=120;
    var y=120;
    var key,pos=0;
    var canvas=document.getElementById("paper");
    var c=canvas.getContext("2d");
    //clearRect(0, 0, canvas.width, canvas.height);
;
    var warrior=new Image();
    var bg = new Image();
    var sprite = new Image ();
    var spriteWall = new Image ();
    var grass = new Image ();
    var grasss = new Image();
    var grassss = new Image();
    var girl = new Image();
   var health = new Image();
    var healthh = new Image();
    
    
    
    bg.onload = function(){
        c.drawImage(bg, 0, 0, 1200, 900);
    }
     bg.src = "https://i.imgsafe.org/c55ce1375d.png";
    c.save();
    
    warrior.onload=function()
    {
      c.drawImage(warrior,x,y);
    }
    warrior.src="http://orig04.deviantart.net/929d/f/2010/163/d/5/egyptian_warrior_sprite_by_cyrite.png";
    
         //spriteWall
    
   spriteWall.onload = function (){
       
      c.drawImage(spriteWall, 0, 0, 1200, 500);
    }
   spriteWall.src = "https://i.imgsafe.org/c55ce1375d.png";
    //---- 
    
    //spritetree 
    sprite.onload = function(){
      c.drawImage(sprite, 0, 0, 250, 500);
    }
    sprite.src = "  https://i.imgsafe.org/c5660505dd.png";
//----
    
    //grass
    grass.onload = function (){
       c.drawImage  (grass, 0, 300);
   }
   grass.src = "http://piq.codeus.net/static/media/userpics/piq_138692_400x400.png";
    //grass 2
        grasss.onload = function (){
       c.drawImage  (grasss, 400, 300);
   }
   grasss.src = "http://piq.codeus.net/static/media/userpics/piq_138692_400x400.png";
   
    //grass 3
        grassss.onload = function (){
       c.drawImage  (grassss, 800, 300);
   }
   grassss.src = "http://piq.codeus.net/static/media/userpics/piq_138692_400x400.png";
    
    // ---
    
        //warrior
    
    warrior.onload=function()
    {
      c.drawImage(warrior,x,y);
    }
   ...