Varying node colours in d3 v4 force directed graph on canvas

I am working on a force-directed graph using d3v4 and html canvas. I have successfully got the nodes to update dynamically so that when you drag a node into the centre, it changes its appearance and so do those immediately related to it via links. However although I can successfully change the size of the node, I cannot change the colour. I suspect this is due to a lack of understanding of HTML canvas. Here is my code for drawing the nodes:

function drawNode(d) {
  var radius, colour;
  if (d.central) {
    radius = 10;
    colour = "red";
  } else if (d.related) {
    radius = 7;
    colour = "black";
  } else {
    radius = 3;
    colour = "grey";
  }
  context.moveTo(d.x + radius, d.y);
  context.font = "10pt Arial";
  context.fillStyle = "black"; // for the text
  context.fillText(d.name,d.x - 30, d.y - 10);
  context.arc(d.x, d.y, radius, 0, 2 * Math.PI);
  context.strokeStyle = colour;
  context.stroke();
  context.fillStyle = colour;
  context.fill();
}

Instead of the nodes being coloured according to whether they are central, related or neither, it seems to colour them haphazardly, sometimes all going red or all grey at once. However the radius works perfectly, so I know that the dynamic properties (central, related) are set correctly and are recognised by the function. What am I missing?