Getting sliders to update HTML canvas

Question

I'm trying to make a colour selector in JavaScript, so far it works (in Firefox, not chrome) if you select a value in the slider and then refresh the page - displaying the colour in a HTML tag.

However, I want it to refresh the colour real-time, so that the canvas changes colour as you adjust the sliders. I imagine I've made a really simple error, but I just can't figure it out - I would very much appreciate any help/advice!

Example of code on my web page.

I've messed around with using .onchange etc, plus declaring "outputR.value" in the rbg() call, but none of this works. I imagine I need an update function - but I'm not sure where to even start on that.

var sliderR = document.getElementById("myRangeR");
var sliderG = document.getElementById("myRangeG");
var sliderB = document.getElementById("myRangeB");
var outputR = document.getElementById("demoR"); 
var outputG = document.getElementById("demoG"); 
var outputB = document.getElementById("demoB"); 

sliderR.oninput = function() { 
  outputR.innerHTML = this.value;
}
sliderG.oninput = function() {
  outputG.innerHTML = this.value;
}
sliderB.oninput = function() {
  outputB.innerHTML = this.value;
}

outputR.innerHTML = sliderR.value;
outputG.innerHTML = sliderG.value;
outputB.innerHTML = sliderB.value;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb("+sliderR.value+","+sliderG.value+","+sliderB.value+")";
ctx.fillRect(0, 0, 80, 80);


  

    Red: /255
    

    Green: /255
    

    Blue: /255

Expected: HTML canvas element changes colour when sliders are moved.

Actual: Colours only change when page is refreshed (in Firefox), or not at all (chrome).

user_8760665 · Answer

I'm not seeing a point in which you update the canvas itself. You would want to update the canvas when the value changes such as:

ctx.fillStyle = "rgb(" + [outputR, outputG, outputB].join(', ') + ")";

then rerender with ctx.fillRect(0, 0, 80, 80);.

This would give you something like the following:

var sliderR = document.getElementById("myRangeR");
var sliderG = document.getElementById("myRangeG");
var sliderB = document.getElementById("myRangeB");
var outputR = document.getElementById("demoR"); 
var outputG = document.getElementById("demoG"); 
var outputB = document.getElementById("demoB"); 

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

sliderR.oninput = function() { 
  outputR.innerHTML = this.value;
  updateRect();
}
sliderG.oninput = function() {
  outputG.innerHTML = this.value;
  updateRect();
}
sliderB.oninput = function() {
  outputB.innerHTML = this.value;
  updateRect();
}

outputR.innerHTML = sliderR.value;
outputG.innerHTML = sliderG.value;
outputB.innerHTML = sliderB.value;

function updateRect() {
  ctx.fillStyle = "rgb(" + [outputR, outputG, outputB].map(i => i.innerHTML).join(', ') + ")";
  ctx.fillRect(0, 0, 80, 80);
}

updateRect();
st.js

user_10005848 · Answer

First things first, you should not enclose your div or another p inside

tag. It's wrong structurally.

Now coming to your question, it is not re-rendering as the script is only getting executed on page load.

Try something like this:

var sliderR = document.getElementById("myRangeR");
var sliderG = document.getElementById("myRangeG");
var sliderB = document.getElementById("myRangeB");
var outputR = document.getElementById("demoR"); 
var outputG = document.getElementById("demoG"); 
var outputB = document.getElementById("demoB");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

myfunc = () => {
  outputR.innerHTML = sliderR.value;
  outputG.innerHTML = sliderG.value;
  outputB.innerHTML = sliderB.value;

  ctx.fillStyle = "rgb("+sliderR.value+","+sliderG.value+","+sliderB.value+")";
  ctx.fillRect(0, 0, 80, 80);
}
myfunc(); // for initialising values on first load


  
    Red: /255
    

    Green: /255
    

    Blue: /255

Hope it helps!

Getting sliders to update HTML canvas

2 Answers