0

I am new to canvas and I need to do the following:

Given we have the following code for changing the image color 

var myImage = new Image();

cnxt = myCanvas.getContext("2d");

cnxt.drawImage(theImage, 0, 0);
myImage.src = "test.png";
myImage = context.getImageData(0, 0, 200, 200);

var data = myImage.data;

        for (var i = 0; i < data.length; i += 4) {
          //red bytes
          myImage.data[i] = 0;
          // green bytes
           myImage.data[i+1] = val;
          // blue bytes.
          myImage.data[i+2] = val;
          //alpha bytes
          myImage.data[i+2] = val;
        }

cnxt.putImageData(myImage, 0, 0);

I need to change the image color based on a input text field value on my page say a range from 0 to 100 and the image color changes from yellow to blue. Can someone help with this? how do we change the image data to accept a range of number and effect the image color?!

ComeRun
  • 921
  • 1
  • 20
  • 38
  • What do you want to do - do you want to colorize it (-> make it monotone in one color) or [shift its hue](https://upload.wikimedia.org/wikipedia/commons/6/6e/Hue.gif)? – humanoid Mar 19 '15 at 03:36
  • @humanoid the purpose is changing the color. range from one color to another using the value entered in a text input! not sure how the image accepts the color value – ComeRun Mar 19 '15 at 03:52

0 Answers0