How i can create a canvas circle with arcs with images inside

Question

I have to do a roulette wheel like http://bramp.net/javascript/lunchwheel.html but in the colors arcs with numbers i need to put images, can i do that?

Answer 1

If we use paths and clipping we can do this easy

Example Fiddle

we create a path with lines and arc then clip that path and draw the image where it needs to be. Remember to save and restore your canvas. because clip will clip all subsequent draws and fills to the path you made.

//This is for only one section of the circle and needs to be repeated 
//for all slices.
var c = document.getElementById("c");
var img = document.createElement("img");

var ctx = c.getContext("2d");
img.src="your-image"
img.onload = function(){run()}
function run(){
    ctx.arc(200,200,150,0,2*Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(350, 200);
    ctx.arc(200,200,150,0,Math.PI/2);
    ctx.lineTo(200, 200);
    ctx.stroke();
    ctx.save();
    ctx.clip();
    ctx.drawImage(img, 200,200);
    ctx.restore();
}