<canvas id="canvas" width="300" height="300"></canvas>
<img src="https://solitaired.com/images/style-classic-2/heart_13.png" id="heart_13" style="display:none;">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const cardName = 'heart_13';
const cardWidth = 100;
const cardHeight = 145;
const cardPadding = 10;
let imagesCanvas = {};

function addImage(params) {
  let name = params.name;
  if (imagesCanvas[name] === undefined) {
    imagesCanvas[name] = document.createElement('canvas');
  }
  imagesCanvas[name].width = cardWidth;
  imagesCanvas[name].height = cardHeight;

  let image = document.getElementById(name);

  let imageCtx = imagesCanvas[name].getContext('2d');
  imageCtx.clearRect(0, 0, cardWidth, cardHeight);
  imageCtx.drawImage(image, 0, 0, cardWidth, cardHeight);  
  ctx.drawImage(imagesCanvas[name], cardPadding, cardPadding);
}

function drawCanvas() {
  ctx.fillStyle = 'rgb(0,80,0)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function play() {
  drawCanvas();  
  addImage({name:cardName});
}

window.onload = play;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.