Argument 1 CanvasRenderingContext2D.drawImage cannot be converted (trying to draw image to canvas)

I am trying to create a cache of objects that can be used with canvas.drawImage () to display images, but only draw them once. I keep getting this error, I tried several answers found on the net like: canvasObject.get(0) and canvasObject[0] and unwrap(canvasObject)

before putting them in draw context, but none of it works. I can't find anything on it. hope someone can help. here is my code:

var canvas = full canvas that cached drawings should draw to
var temp = {};
var h = heightOfGridSquare; 
var w = widthOfGridSquare;

 var canvasElementForCache = document.createElement('canvas');
 canvasElementForCache.width = w * 2; // so that i can draw pictures larger then single grid square
 canvasElementForCache.height = h * 2;
 var cachedCanvas = canvasElementForCache.getContext(ctx);

// cache drawing in app object
var cacheDrawing = function ( name ){
    app.cache[name] = objectRepo[name](cachedCanvas);
};

var objectRepo = {
    someObjectName: function (canv) {
        var m = temp.coordinates;
        canv.fillStyle = "rgba(0,0,200,0.9)";
        canv.fillRect(m.x + 25, m.y + 25,50, 50); // random filler (x and y are coordinates defined in the draw object funciton )
        return canv;
    },
};

var drawObejectAtCoordinates = function ( x, y ) {
     var px = ( x - ( w / 2 ));
     var py = ( y + ( h / 2 ));
     if ( app.cache[name] === undefined ){
            temp.coordinates = { x:px, y:py };
            cacheDrawing(name);
     }
     // drawing on actual canvas
     canvas.drawImage( app.cache[name], px, py );
};

var render = function () {
    drawObejectAtCoordinates( coordinateX, coordinateY );


  // this is just a place holder, my actual code is very long and has different rendering methods.. 
  // just know that it is being rendered ( not super important though since the error occurs at drawImage not render ) 
    window.requestAnimationFrame(render);
}

      

        
        
        
      

    

this is mostly accurate, i changed the small parts a bit for brevity .. but there is nothing to do with the problem im. if anyone can help i would really appreciate it!

error message:

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.

      

        
        
        
      

    

and when I console log the content of the cached canvas object it looks like this:

CanvasRenderingContext2D { canvas: <canvas>, globalAlpha: 1, globalCompositeOperation: "source-over", strokeStyle: "#41471d", fillStyle: "#ff8800", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 0, shadowColor: "rgba(0, 0, 0, 0)", mozCurrentTransform: Array[6] }

      

        
        
        
      

    

Here is a jsFiddle example: https://jsfiddle.net/1krgqeq7/3/