CODEWITHSUNDEEP
javascripthtmlcanvas
b1n1e1
b1n1e1

Reputation: 25

Drawing Two Different Colors On Javascript

In computer class, I had to draw something that I like so I decided to draw m&ms. However, it writes the "m" on the candy the same color as the candy as opposed to white. This is my code for one m&m:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawCircle(x, y, rad, cut, pi, color) {
  ctx.beginPath();
  ctx.arc(x, y, rad, cut, Math.PI * pi);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();

}

function drawMnM(x, y, color) {
  drawCircle(x, y, 15, 0, 2, color);
  ctx.font = "30px Arial";
  ctx.fillText("m", x - 15, y);
  ctx.fillStyle = "white";
}

drawMnM(75, 75, "red");
<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
    </canvas>

The m&m's "m" comes out red, so how could I fix this problem?

Upvotes: 2

Views: 66

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

You need to set the fillStyle before the fillText (since it will be used for drawing the text)

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawCircle(x, y, rad, cut, pi, color) {
  ctx.beginPath();
  ctx.arc(x, y, rad, cut, Math.PI * pi);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();

}

function drawMnM(x, y, color) {
  drawCircle(x, y, 15, 0, 2, color);
  ctx.font = "30px Arial";
  ctx.fillStyle = "white";
  ctx.fillText("m", x - 15, y);
}

drawMnM(75, 75, "red");
<canvas id="myCanvas"  style="border:1px solid #d3d3d3;">
    </canvas>

Upvotes: 2

Related Questions