SVG as texture to three.js

HTML

<script src="http://threejs.org/build/three.min.js"></script>

<div id="svgContainer" style="width: 222px; height: 222px;">
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
    <circle id="test" cx="125" cy="125" r="75" fill="orange" />
    <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
    <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
  </svg>
</div>

JavaScript

var mesh;
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(50, 500 / 400, 0.1, 1000);
camera.position.z = 10;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(500, 400);
document.body.appendChild(renderer.domElement);

var svg = document.getElementById("svgContainer").querySelector("svg");
var svgData = (new XMLSerializer()).serializeToString(svg);

var canvas = document.createElement("canvas");
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.height;
var ctx = canvas.getContext("2d");

var img = document.createElement("img");
var material;
img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))) );

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  var texture = new THREE.Texture(canvas);
  texture.needsUpdate = true;
  var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
  material = new THREE.MeshBasicMaterial({ map: texture });
  material.map.minFilter = THREE.LinearFilter;
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
};



var colors = ["red","orange","yellow", "green", "blue"];


var c = 0;
function clickBody() {
 	document.getElementById("test").setAttribute("fill", colors[c]);
	var svgData = (new XMLSerializer()).serializeToString(svg);
  img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))) );
  img.onload = function(){
  		ctx.drawImage(img, 0, 0);
  		console.log("onload ran");
  	  var texture = new THREE.Texture(canvas);
      material.map = texture;
      material.map.minFilter = THREE.LinearFilter;
      material.map.needsUpdate = true;
      renderer.render(scene, camera);
  }
  c = c + 1;
  if(c == colors.length){
  	c = 0;
  }
}
document.body.addEventListener("click", clickBody)

var render = function () {
    requestAnimationFrame(render);
    mesh.rotation.y += 0.01;
   ...