Create a curve using two distinct colors in JavaScript

Question

Create a curve using two distinct colors in JavaScript

I am currently experimenting with a canvas and I have a specific challenge in mind. My goal is to draw an arc using two different colors, where the first half of the arc will be green and the second half red. Check out the code snippet below:

// CANVAS
const canvas = document.getElementById('bar'),
    width = canvas.width,
    height = canvas.height;

// CANVAS PROPERTIES
const ctx = canvas.getContext('2d');
ctx.lineWidth = 6;
ctx.strokeStyle = 'green';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

const x = width / 2,
    y = height / 2,
    radius = 41,
    circum = Math.PI * 2,
    start = 2.37, 
    finish = 75; 
  let curr = 0; 
const raf =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
window.requestAnimationFrame = raf;

function animate(draw_to) {
  //ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.arc(x, y, radius, start, draw_to, false);
  ctx.stroke();
  curr++;
  if (curr < finish + 1) {
    requestAnimationFrame(function () {
      animate(circum * curr / 100 + start);
    });
  }
}

animate();

For the full code implementation, visit: https://jsfiddle.net/gowtham25/bp0myt21/11/

javascript css canvas

Answer 1

Answer №1

Is this what you're looking for?

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const x = canvas.width / 2
const y = canvas.height / 2
const radius = 41
const start = -25
const end = 75
const width = 6

function DrawArc(x, y, radius, start, end, width, color) {
  ctx.beginPath()
  ctx.lineWidth = width
  ctx.strokeStyle = color
  ctx.arc(x, y, radius, start, end, false)
  ctx.stroke()
}

function DrawGauge(percentage) {
  const rotation = Math.PI * 0.75
  const angle = Math.PI * 1.5
  const current = angle * percentage / 100

  DrawArc(x, y, radius, rotation, rotation + current, width, 'green')
  DrawArc(x, y, radius, rotation + current, rotation + angle, width, 'red')
}

function Animate(percent = 0) {
  if (percent < 0) return
  if (percent > 100) return
  DrawGauge(percent)
  requestAnimationFrame(() => Animate(++percent))
}

Animate()

<canvas></canvas>

It's advisable to create separate functions to draw different elements so that you can easily customize and reuse them. This approach helps in separating the drawing logic from data manipulation, which is crucial as your projects become more complex.

Answer 2

Is this what you're looking for?

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const x = canvas.width / 2
const y = canvas.height / 2
const radius = 41
const start = -25
const end = 75
const width = 6

function DrawArc(x, y, radius, start, end, width, color) {
  ctx.beginPath()
  ctx.lineWidth = width
  ctx.strokeStyle = color
  ctx.arc(x, y, radius, start, end, false)
  ctx.stroke()
}

function DrawGauge(percentage) {
  const rotation = Math.PI * 0.75
  const angle = Math.PI * 1.5
  const current = angle * percentage / 100

  DrawArc(x, y, radius, rotation, rotation + current, width, 'green')
  DrawArc(x, y, radius, rotation + current, rotation + angle, width, 'red')
}

function Animate(percent = 0) {
  if (percent < 0) return
  if (percent > 100) return
  DrawGauge(percent)
  requestAnimationFrame(() => Animate(++percent))
}

Animate()

<canvas></canvas>

It's advisable to create separate functions to draw different elements so that you can easily customize and reuse them. This approach helps in separating the drawing logic from data manipulation, which is crucial as your projects become more complex.

Answer 3

Answer №2

To ensure proper drawing, it is essential to adjust the startAngle parameter in the
ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

If you modify the strokeStyle without updating the startAngle, the drawing will occur on the same path.

https://jsfiddle.net/97ogkwas/4/

// CANVAS
const canvas = document.getElementById('bar'),
    width = canvas.width,
    height = canvas.height;

// CANVAS PROPERTIES
const ctx = canvas.getContext('2d');
ctx.lineWidth = 6;
ctx.strokeStyle = 'green';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

let x = width / 2,
    y = height / 2,
    radius = 41,
    circum = Math.PI * 2
    start = 0.5* Math.PI
    finish = 75; 
  let curr = 0; 
const raf =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
window.requestAnimationFrame = raf;

function animate(draw_to) {
  //ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
   if(curr>45){
    ctx.strokeStyle = 'red';
        start = 1* Math.PI;
       
    }
  ctx.arc(x, y, radius, start, draw_to, false);
  ctx.stroke();
  curr++;
  if (curr < finish + 1) {
    requestAnimationFrame(function () {
  
      animate(circum * curr / 100 + start);
      
    });
  }
}

animate();

#bar {
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="bar" width="100" height="100"></canvas>

https://jsfiddle.net/97ogkwas/4/

Answer 4

To ensure proper drawing, it is essential to adjust the startAngle parameter in the
ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

If you modify the strokeStyle without updating the startAngle, the drawing will occur on the same path.

https://jsfiddle.net/97ogkwas/4/

// CANVAS
const canvas = document.getElementById('bar'),
    width = canvas.width,
    height = canvas.height;

// CANVAS PROPERTIES
const ctx = canvas.getContext('2d');
ctx.lineWidth = 6;
ctx.strokeStyle = 'green';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

let x = width / 2,
    y = height / 2,
    radius = 41,
    circum = Math.PI * 2
    start = 0.5* Math.PI
    finish = 75; 
  let curr = 0; 
const raf =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
window.requestAnimationFrame = raf;

function animate(draw_to) {
  //ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
   if(curr>45){
    ctx.strokeStyle = 'red';
        start = 1* Math.PI;
       
    }
  ctx.arc(x, y, radius, start, draw_to, false);
  ctx.stroke();
  curr++;
  if (curr < finish + 1) {
    requestAnimationFrame(function () {
  
      animate(circum * curr / 100 + start);
      
    });
  }
}

animate();

#bar {
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="bar" width="100" height="100"></canvas>

https://jsfiddle.net/97ogkwas/4/

Answer 5

Answer №3

// HTML CANVAS CREATION
const canvas = document.getElementById('bar'),
     width = canvas.width,
     height = canvas.height;

// SETTING CANVAS PROPERTIES
const ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.strokeStyle = 'green';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

// ANOTHER SET OF CANVAS PROPERTIES
const ctx2 = canvas.getContext('2d');
ctx2.lineWidth = 1;
ctx2.shadowOffsetX = 0;
ctx2.shadowOffsetY = 0;

var x = width / 2,
    y = height / 2,
    radius = 40,
    circum = Math.PI * 2,
    start = 2.37, 
    finish = 50; 
      
let curr = 0; 
  
const raf = window.requestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.msRequestAnimationFrame;
window.requestAnimationFrame = raf;

function animate(draw_to) {
  //ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.arc(x, y, radius, start, draw_to, false);
  ctx.stroke();
  curr++;
  if (curr < finish + 5) {
    requestAnimationFrame(function () {
      animate(circum * curr / 100 + start);
    });
  }
}

function animate2(draw_to) {
  //ctx.clearRect(0, 0, width, height);
  ctx2.beginPath();
  ctx2.arc(x, y, radius, start, draw_to, false);
  ctx2.stroke();
  curr++;
  if (curr < finish + 5) {
    requestAnimationFrame(function () {
      animate2(circum * curr / 100 + start);
    });
  }
}

animate();

setTimeout(function(){ 
finish = 52;
start = 5.5;
ctx2.strokeStyle = 'red';
animate2();
}, 2000);

#bar {
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="bar" width="100" height="100"></canvas>

The question is vague! Here is a possible solution:

https://jsfiddle.net/15srnh4w/

Answer 6

// HTML CANVAS CREATION
const canvas = document.getElementById('bar'),
     width = canvas.width,
     height = canvas.height;

// SETTING CANVAS PROPERTIES
const ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.strokeStyle = 'green';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

// ANOTHER SET OF CANVAS PROPERTIES
const ctx2 = canvas.getContext('2d');
ctx2.lineWidth = 1;
ctx2.shadowOffsetX = 0;
ctx2.shadowOffsetY = 0;

var x = width / 2,
    y = height / 2,
    radius = 40,
    circum = Math.PI * 2,
    start = 2.37, 
    finish = 50; 
      
let curr = 0; 
  
const raf = window.requestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.msRequestAnimationFrame;
window.requestAnimationFrame = raf;

function animate(draw_to) {
  //ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.arc(x, y, radius, start, draw_to, false);
  ctx.stroke();
  curr++;
  if (curr < finish + 5) {
    requestAnimationFrame(function () {
      animate(circum * curr / 100 + start);
    });
  }
}

function animate2(draw_to) {
  //ctx.clearRect(0, 0, width, height);
  ctx2.beginPath();
  ctx2.arc(x, y, radius, start, draw_to, false);
  ctx2.stroke();
  curr++;
  if (curr < finish + 5) {
    requestAnimationFrame(function () {
      animate2(circum * curr / 100 + start);
    });
  }
}

animate();

setTimeout(function(){ 
finish = 52;
start = 5.5;
ctx2.strokeStyle = 'red';
animate2();
}, 2000);

#bar {
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="bar" width="100" height="100"></canvas>

The question is vague! Here is a possible solution:

https://jsfiddle.net/15srnh4w/

Create a curve using two distinct colors in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

The CSS of the Sendgrid template is being overlooked

I encountered an issue while trying to integrate VideoJS with React

The alertify.alert function encounters issues when used within the response of a mithril m.request

The z-index property does not seem to apply to pseudo elements

Sometimes, the browser may fail to recognize a jQuery click event when a CSS3 transform is applied

Using Mongoose with Next.js to implement CRUD operations

implementing a timestamp in a specific timezone with Vue.js

Display or conceal div based on chosen options

Could someone assist me in understanding why VScode is displaying an error stating it cannot locate a module?

I am experiencing an issue where the Mongo item ID is not being successfully passed through the REST API

Exploring the concept of self in JavaScript

Using whitespace to format a document.write in JavaScript

What would be the ideal alternative if the Google Ajax API is unavailable, given that Google does not allow for local installation?

Guide on dynamically updating a div in PHP with a mix of text output and images at regular intervals

Manipulate a JavaScript object with AngularJS - viewing and editing capabilities

Error encountered while attempting to retrieve an environment variable: Invalid token found

Updating the load context variable in Django template after making changes via an AJAX call: a step-by-step guide

site with scrolling options in various directions

Attempting to understand how to retrieve specific items from my MongoDB Database that are associated with a particular user based on their ID

The Vue design is not being reflected as expected