无法将图像导入画布

Question

我必须使用基于流星和模板的结构。也就是说：我的输入按钮允许用户访问他们计算机上的图像。当图像上传时，所选图像的上传名称将显示在画布外部，但画布上不会显示任何图像。

Error: document.getElementById(...).getContext is not a function

<template name="canvas">
  <div><input type="file" id="input"/></div>
  <div id='canvas'></div>
</template>

在单独的js文件中：

Canvas = function () {
  var self = this;
  var svg;

  var createSvg = function() {
    svg = d3.select('#canvas').append('svg')
      .attr('width', 1425)
      .attr('height',610);
  };
  createSvg();

  self.clear = function() {
    d3.select('svg').remove();
    createSvg();
  };

  self.draw = function(data) {
    if (data.length < 1) {
      self.clear();
      return;
    }
    if (svg) {


var input = document.getElementById('input');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
        ctx.drawImage(img, 20,20);
    }
}

      svg.selectAll('line').data(data, function(d) { return d._id; })
      .enter().append('line')
      .attr('x1', function (d) { return d.x; })
      .attr('y1', function (d) { return d.y; })
      .attr('x2', function (d) { return d.x1; })
      .attr('y2', function (d) { return d.y1; })
      .attr("stroke-width", function (d) { return d.w; })
      .attr("stroke", function (d) { return d.c; })
      .attr("opacity", function (d) { return d.o; })
      .attr("stroke-linecap", "round");

    }
  };
}

各种画笔，颜色等都在另一个单独的js文件中。

Error: document.getElementById(...).getContext is not a function

任何帮助非常感谢。我对这一切都很陌生。