キャンバスにSVGを描く

Question

私は座標のセットを持っており、すべてのペアについてキャンバスにSVGを配置したいと思います。問題はgetCircleです。 SVGは機能しませんが、円を描くと（コメント付きコードを参照）、それは機能します。 img.onload()で

function getCircle() { 
 
    var circle = document.createElement("canvas"), 
 
     ctx = circle.getContext("2d"),  
 
     r2 = radius + blur; 
 

 
    circle.width = circle.height = r2 * 2; 
 

 
/* 
 
    ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2; 
 
    ctx.shadowBlur = blur; 
 
    ctx.shadowColor = "purple"; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(-r2, -r2, radius, 0, Math.PI * 2, true); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
*/ 
 
    
 
    var img = new Image(); 
 
    img.onload = function() { 
 
    ctx.drawImage(img, 0, 0); 
 
    }; 
 
    img.src = "https://upload.wikimedia.org/wikipedia/en/0/09/Circle_Logo.svg"; 
 
    
 
    return circle; 
 
} 
 

 
var radius = 5; 
 
var blur = 1; 
 
var canvas = document.getElementById('c'); 
 
var ctx = canvas.getContext('2d'); 
 
canvas.width = 400; 
 
canvas.height = 200; 
 
var circle = getCircle(); 
 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
var data = [[38,20,2]]; 
 

 
for (var i = 0, len = data.length, p; i < len; i++) { 
 
    p = data[i]; 
 
    ctx.drawImage(circle, p[0] - radius, p[1] - radius); 
 
}

#c { 
 
    width: 400px; 
 
    height: 200px; 
 
}

<canvas id="c"></canvas>

Answer 1

var canvas = document.getElementById('c'); 
 
var ctx = canvas.getContext('2d'); 
 
canvas.width = 400; 
 
canvas.height = 200; 
 
var data = [[0,20,2],[125,20,2],[250,20,2]]; 
 
drawImage(); 
 

 
function drawImage() { 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
    for (var i = 0, len = data.length, p; i < len; i++) { 
 
     p = data[i]; 
 
     ctx.drawImage(this, p[0] , p[1] , 150, 150); 
 
    } 
 
    }; 
 
    img.src = "https://upload.wikimedia.org/wikipedia/en/0/09/Circle_Logo.svg"; 
 
}

#c { 
 
    width: 400px; 
 
    height: 200px; 
 
}

<canvas id="c"></canvas>

drawImage()を使用してwidhtと高さを指定した位置にあなたのイメージを描きます。