问如果使用画布找不到图像，则显示名称头像(回退)

EN

.avatar{
    background: #D770AD;
    padding: 10px;
    width: 32px;
    height: 32px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    font-weight: 700;
    margin-right: 5px;
    color: #FFFFFF;
  }

<div class="avatar">FL</div>

  var username = attr.username;
  var name = attr.name;
  var imgSrc = "https://path/to/server/"+username+".jpg";


  var canvas = document.createElement('canvas'); //es-lint disable
  canvas.width = '32';
  canvas.height = '32';
  var context = canvas.getContext('2d');
  context.fillStyle = "#D6B478";
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.font = "16px 'Roboto'";
  context.fillStyle = "white";
  var nameArr = name.split(' ')
  context.fillText(nameArr[0].charAt(0)+nameArr[1].charAt(0),7,22
  var dataUrl = canvas.toDataURL();

  var elem = document.getElementById('#Target')
  var img = new Image();
  img.src = imgSrc;
  elem.html('<img src="'+dataUrl+'" alt="" />')
  img.onerror = function () {
    console.log("Error Occured to load Avatar for " + imgSrc);
    img.onerror = null
    img.src = dataUrl
  }
  img.onload = function () {
    elem.html('')
    elem.append(img)
  }

var colours = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];

    var name = "Samundra Adhikari",
      nameSplit = name.split(" "),
      initials = nameSplit[0].charAt(0).toUpperCase() + nameSplit[1].charAt(0).toUpperCase();

    var charIndex = initials.charCodeAt(0) - 65,
      colourIndex = charIndex % 19;

    var canvas = document.createElement('canvas'); //es-lint disable
    canvas.width = '32';
    canvas.height = '32';
    var context = canvas.getContext("2d");
    context.fillStyle = colours[colourIndex];
    context.fillRect (0, 0, canvas.width, canvas.height);
    context.font = "16px Arial";
    context.textAlign = "center";
    context.fillStyle = "#FFF";
    context.fillText(initials,16,22);
    var dataUrl = canvas.toDataURL();
    return dataUrl;