CODEWITHSUNDEEP
javascripthtml
Om3ga
Om3ga

Reputation: 32893

change color of rectangle based on slider's value

I have html5 canvas and rectangle on it. Second, I have a slider. When user change position of slider the color of rectangle automatically change based on the value of the slider. The range of slider is 0-100. 0 is for 0 is for color blue and 100 is for red. How can I achieve this?

Here is my code jsfiddle

<canvas id="canvas"></canvas>
<input type="range" id="range" min="0" max="100" value="0">

js

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

    context.beginPath();
    context.rect(188, 50, 200, 100);
    context.fillStyle = 'yellow';
    context.fill();

Upvotes: 1

Views: 3746

Answers (2)

Joe Simmons
Joe Simmons

Reputation: 1848

This is how I would do it using a scale of 0-255, since rgb values are from 0-255.
You could use a little math to be able to use 0-100 and convert it to 0-255 behind the scenes, though.

HTML:

<canvas id="canvas"></canvas>
<input type="range" id="range" min="0" max="255" value="0">


JavaScript:

var slider = document.getElementById('range');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function sliderChange() {
    var value = parseInt(slider.value, 10);
    context.beginPath();
    context.rect(188, 50, 200, 100);
    context.fillStyle = 'rgb(' + value + ', 0, ' + (255 - value) + ')';
    context.fill();   
}

slider.onchange = sliderChange;

sliderChange(); // run our function once to start

jsFiddle link

Upvotes: 2

Passerby
Passerby

Reputation: 10070

If you want to go from red to yellow to blue:

var slider = document.getElementById('range');
var ctx=document.getElementById("canvas").getContext("2d");

slider.addEventListener("change",function(){
    var r,g,b;
    if(slider.value<=50){
        r=255;
        g=Math.round(255*slider.value/50);
        b=0;
    }else{
        r=Math.round(255*(100-slider.value)/50);
        g=r;
        b=Math.round(255*(slider.value-50)/50);
    }
    ctx.clearRect(0,0,100,100);
    ctx.save();
    ctx.fillStyle="rgb("+r+","+g+","+b+")";
    ctx.beginPath();
    ctx.rect(0,0,100,100);
    ctx.fill();
    ctx.restore();
},false);

If you want to go just from red to blue:

var slider=document.getElementById("range");
var ctx=document.getElementById("canvas").getContext("2d");
slider.addEventListener("change",function(){
    var r,b;
    r=Math.round(255*(100-slider.value)/100);
    b=Math.round(255*slider.value/100);
    ctx.clearRect(0,0,100,100);
    ctx.save();
    ctx.fillStyle="rgb("+r+",0,"+b+")";
    ctx.beginPath();
    ctx.rect(0,0,100,100);
    ctx.fill();
    ctx.restore();
},false);

JSFiddle that contains both two

In "red to yellow to blue" case, the three colors:

  • Red: stays at 255 in 0 to 50, then 255 to 0 in 50 to 100;
  • Green: from 0 to 255 in 0 to 50, then 255 to 0 in 50 to 100;
  • Blue: stays at 0 in 0 to 50, then 0 to 255 in 50 to 100.

In "red to blue" case, the three colors:

  • Red: from 255 to 0 in 0 to 100;
  • Green: not present;
  • Blue: from 0 to 255 in 0 to 100.

Edit:

Here's a third option of the transaction:

var slider=document.getElementById("range");
var ctx=document.getElementById("canvas").getContext("2d");
slider.addEventListener("change",function(){
    var r,g,b;
    if(slider.value<=25){
        r=255;
        g=Math.round(255*slider.value/25);
        b=0;
    }else if(slider.value<=50){
        r=Math.round(255*(50-slider.value)/25);
        g=255;
        b=0;
    }else if(slider.value<=75){
        r=0;
        g=255;
        b=Math.round(255*(slider.value-50)/25);
    }else{
        r=0;
        g=Math.round(255*(100-slider.value)/25);
        b=255;
    }
    ctx.clearRect(0,0,100,100);
    ctx.save();
    ctx.fillStyle="rgb("+r+","+g+","+b+")";
    ctx.beginPath();
    ctx.rect(0,0,100,100);
    ctx.fill();
    ctx.restore();
},false);

JSFiddle that contains all three

Upvotes: 1

Related Questions