JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="400" height="400"></canvas>

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
</svg>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

//var svg = document.getElementById('mySVG');

var img = new Image();
var delayInMilliseconds = 3000;
//var date = new Date(2015, 6, 18, 21, 40, 20);
img.onload = function() {
    setTimeout(function() {
        ctx.drawImage(img, 0, 0)
    }, delayInMilliseconds);
    // }, getTimeTo(date));
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

function getTimeTo(date) {
    var time = date.getTime() - Date.now();
    console.log(time);
    return time;
}