How to add SVG image to javascript html5 canvas animation?

Question

I currently have a rotating bouncing ball within an html5 canvas and I am looking to insert an SVG image inside the ball that moves and rotates with it I have this code from researching this but unsure if this is correct

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "";

Does anyone have any suggestion on how I might achieve this? Here is my code

<canvas id="myCanvas"></canvas>


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
// SPEED
var dx = 4;
var dy = -4;

var radius = 120;

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();



ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = "#9370DB";
ctx.fill();
ctx.closePath();

if (x + dx > canvas.width - radius) {
dx = -dx;
}

if (x + dx < radius) {
dx = -dx;
}

if (y + dy > canvas.height - radius) {
dy = -dy;
}

if (y + dy < radius) {
dy = -dy;
}

x += dx;
y += dy;
}

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

resizeCanvas();

x = canvas.width / 2;
y = canvas.height / 2;

setInterval(draw, 10);

Answer 1

var img = new Image();
img.src = ""; // Put the path to you SVG image here.
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

This should work

Answer 2

One way of doing it would be putting the image hidden in the HTML. In this case the image is an svg as data uri and has an id="apple" and you can say:

var img = apple;

To draw the image inside the ball you need to use the center of the ball, for example like this:

ctx.drawImage(img, x-img.width/2,y-img.height/2)

Also instead of using setInterval I'm using requestAnimationFrame and the image is not getting out of the screen on resize. I hope you will find my answer useful.

 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height / 2; var rid = null;// request animation id // SPEED var dx = 4; var dy = -4; var radius = 120; var img = apple;// the image is the one with the id="apple" function draw() { rid = window.requestAnimationFrame(draw); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = "#9370DB"; ctx.fill(); ctx.closePath(); //draw the image in the center of the ball ctx.drawImage(img, x-img.width/2,y-img.height/2) if (x + dx > canvas.width - radius) { dx = -dx; } if (x + dx < radius) { dx = -dx; } if (y + dy > canvas.height - radius) { dy = -dy; } if (y + dy < radius) { dy = -dy; } x += dx; y += dy; } window.addEventListener('resize', resizeCanvas, false); function resizeCanvas() { //stop the animation if(rid){window.cancelAnimationFrame(rid); rid= null;} //get the size of the canvas canvas.width = window.innerWidth; canvas.height = window.innerHeight; x = canvas.width / 2; y = canvas.height / 2; //restart the animation draw() } window.setTimeout(function() { resizeCanvas(); window.addEventListener('resize', resizeCanvas, false); }, 15); 

 <canvas id="myCanvas"> <img id="apple" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' width='106px' height='122px' viewBox='41 54 106 122'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' stroke='%23ED1D24' stroke-width='2' stroke-miterlimit='10' d='M143.099,93.757c0,0-14.173,8.549-13.724,23.173 c0.449,14.624,11.954,23.413,15.974,24.073c1.569,0.258-9.245,22.049-15.984,27.448c-6.74,5.4-13.714,6.524-24.513,2.25c-10.8-4.275-18.449,0.275-24.749,2.612c-6.299,2.337-13.949-0.137-24.298-14.987c-10.349-14.849-21.823-49.271-6.074-66.146c15.749-16.874,33.298-10.124,38.022-7.875c4.725,2.25,13.05,2.025,22.499-2.25C119.7,77.782,138.374,86.782,143.099,93.757z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23FFFFFF' stroke='%23ED1D24' stroke-width='2' stroke-miterlimit='10' d='M118.575,54.609c0,0,0.9,5.625-1.35,10.349 s-10.718,20.936-22.994,17.999c-0.308-0.073-2.102-5.506,0.532-11.027C98.48,64.138,108.171,55.399,118.575,54.609z'/%3E%3C/g%3E%3C/svg%3E" /> </canvas> 

Please run the code on full page.