javascript - How to change window center and width of an image on mouse move event -

i have dicom image , want apply w/l on image. in normal terms, trying change color of image drag mouse on it. becomes white when try change it.

here's doing.

this part of code.

var imagedata = ctx.getimagedata(0, 0, img.width, img.height); var data = imagedata.data;  var pixels = imagedata.data,     len = pixels.length; var = 256 * slope / window_width,     b = 256 * ((intercept - window_level) / window_width);  (i = 0; < len; += 4) {     //pixval = * (pixels[i] * 256 + pixels[i + 1]) + b;     //pixels[i] = pixels[i + 1] = pixels[i + 2] = pixval      if (pixels[i + 3] == 0)         continue;      var pixelindex = i;     var red = pixels[pixelindex]; // red   color     var green = pixels[pixelindex + 1]; // green color     var blue = pixels[pixelindex + 2]; // blue  color     var alpha = pixels[pixelindex + 3];      var pixelvalue = * (red * 256 + green + b);     pixels[i] = pixels[i + 1] = pixels[i + 2] = pixelvalue;     pixels[i + 3] = 0xff;     //console.log(pixelvalue == pixval);  } 

here's jsfiddle complete code.

the main problem you're changing image data when drawing it. need store raw version of image data, "apply" window level dynamically when drawing. otherwise, you're compounding changes on top of each other.

try making 2 canvas objects: 1 (offscreen) load , store image data , other draw it. making relatively small change code, appeared work right.

there may other issues starting values -- think may missing rescale slope , intercept -- fixing first issue should make easier figure out.

here's jsfiddle: https://jsfiddle.net/8ne1pnaj/5/

var imagedata = ctxdata.getimagedata(0, 0, img.width, img.height); // ... ctx.putimagedata(imagedata, 0, 0) 

ctxdata original data. ctx drawing context.