CODEWITHSUNDEEP
javascripthtmlcanvas
Wai Yan Hein
Wai Yan Hein

Reputation: 14791

Filling the color to specific section of HTML canvas in JavaScript like Windows Paint

I am now trying to deeply understand the canvas and JavaScript. Now I am drawing an image on HTML canvas using JavaScript. I can draw the image successfully. But I am having a problem with filling the colour. This is the picture I have drawn using JavaScript and canvas.

enter image description here

This is the JavaScript code.

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    //circles
    var center_y = 150;//Y
    var center_x = 150;
    var lineWidth = 10;
    context.lineWidth=lineWidth;

    context.beginPath();
    context.arc(center_x,center_y ,50,0,2*Math.PI);
    context.strokeStyle = "#FF00FF";
    context.stroke();

    context.beginPath();
    context.arc(center_x,center_y ,40,0,2*Math.PI);
    context.strokeStyle = "#990000";
    context.stroke();

    context.beginPath();
    context.arc(center_x,center_y ,30,0,2*Math.PI);
    context.strokeStyle = "#0099CC";
    context.stroke();


    context.lineWidth = 1;
    x1 = 150;
    y1 = 150;
    r =  140;
    theta = 0.5;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

    theta = 1;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

    theta = 1.5;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

    theta = 2;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

    theta = 2.5;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();


    theta = 3;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

Basically, what I am doing is drawing circles from smaller to bigger with the same center. Then draw the line from the same center increasing the degree equally after each line is drawn. Yes, the image is drawn successfully. But there is an issue with what I want to achieve. As you can see, for coloring the circle, I set the line with of circle to ten and set the color for the line. So the whole circle line has only one color. But what I would like to do is I want to set the different color for each section of the circle. I set the section by separating with the lines as follow.

enter image description here

So, what I want to do is, I want to set the different color to section A of circle "1" from section B of circle "1" and so on. In Microsoft Paint software, if we paint a section, if the section is bordered properly, only the bordered area section is painted. So, I would like to do something like that.

Upvotes: 0

Views: 1140

Answers (2)

salvador
salvador

Reputation: 66

You should probably draw different arcs for the different sections by changing the last 2 parameters of the arc method:

context.arc(cx,cy ,radius, theta_start, theta_end);

I made this jsfiddle for you: https://jsfiddle.net/gtato/znxzvjnp/

Upvotes: 3

gil.fernandes
gil.fernandes

Reputation: 14601

If you want to set to set the different color to section A of circle "1" from section B of circle "1" and so on, you can use draw arcs next to each other. You have to calculate the angle from and to and make sure these are adjacent.

Here is a small example on how you can draw something like a piechart with random colors:

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

context.lineWidth = 1;
x1 = 150;
y1 = 150;
r = 150;
let prevAngle = 0;
let angle = 0;
let fraction = 0.05;
for (i = 0; i * fraction <= 1; i++) {
  
  context.fillStyle = getRandomColor();

  // Calculate new angle from previous one
  angle = prevAngle + fraction * Math.PI * 2;

  //create a path
  context.beginPath();
  context.moveTo(x1, y1);
  context.arc(x1, y1, r, prevAngle, angle, false);
  context.lineTo(x1, y1);

  //fill it
  context.fill();

  // Create a stroke
  context.strokeStyle = "#000000";
  context.stroke();

  prevAngle = angle;
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
<canvas width="500" height="500" id="canvas">
</canvas>

Upvotes: 0

Related Questions