Problems with canvas image

Question

I'm currently working on a spinning wheel. But I want to change a red background-color to an background-image http://www.dougtesting.net/winwheel. Does somebody know how I can fix this. It has to be javascript and not jQuery. The code has to be in the function 'drawRouletteWheel'.

https://jsfiddle.net/9wo2krh8/

function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
  var outsideRadius = 250;
  var textRadius = 125;
  var insideRadius = 0;
  surface = canvas.getContext("2d");
  surface.font = 'bold 25px sans-serif';
  for(var i = 0; i < 8; i++) {
    var angle = startAngle + i * arc;
    surface.fillStyle = 'red';
    surface.beginPath();
    surface.arc(250, 250, outsideRadius, angle, angle + arc, false);
    surface.arc(250, 250, insideRadius, angle + arc, angle, true);
    surface.fill();
    surface.save();   

    surface.fillStyle = "yellow";
    surface.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
    surface.rotate(angle + arc / 2 + Math.PI / 2);
    var text = restaraunts[i];
    surface.fillText(text, -surface.measureText(text).width / 2, 0);
    surface.restore();
  } 


}

May I suggest reducing this down to the bare minimum as well as providing a https://jsfiddle.net/ — Brian Boyd, Apr 09 '15 at 00:57
Here's an update jsfiddle link. https://jsfiddle.net/9wo2krh8/2/ — Brian Boyd, Apr 09 '15 at 01:42
Is there a way to make the background-image the same rotate as the array? — leeuwisarvin, Apr 09 '15 at 01:50

markE · Accepted Answer · 2015-04-09T01:37:59.887

0

You can use context.drawImage to draw an image onto your canvas:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/wheel.png";
function start(){
  ctx.drawImage(img,0,0);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=450 height=450></canvas>

edited Apr 09 '15 at 01:37

answered Apr 09 '15 at 01:15

markE

102,905
11
164
176

I tried your option, but that doesn't work. I think because I am not so good in Javascript. But is there not a way, that to change 'red' into an image link? – leeuwisarvin Apr 09 '15 at 01:29
It seems I don't understand what you want... :-// ...could you describe more of what you need. Are you saying you want to fill the circle with an image instead of filling it with a solid red color? – markE Apr 09 '15 at 01:30
Yeah, that's right. I added a link in the description with an example of how I should look like. – leeuwisarvin Apr 09 '15 at 01:32
I think I understand. You want to draw an image of your spinning wheel onto your canvas...you can do that with `context.drawImage` I've again edited my answer to show how. Good luck with your project! – markE Apr 09 '15 at 01:38
Thank you, how can I put this in my code. Do I need to remove the canvas I have drew? – leeuwisarvin Apr 09 '15 at 01:41

Problems with canvas image

1 Answers1