Home/ Questions/Q 6368245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:39:04+00:00

<!DOCTYPE html> <html> <head> <title> New Document </title> <script type=text/javascript> window.onload = function ()

  • 0
<!DOCTYPE html>
<html>
 <head>
  <title> New Document </title>
<script type="text/javascript">
window.onload = function ()  {
  var area = document.getElementById('area');
  alert('area:'+area);   
  var context = area.getContext('2d');
  alert('context:'+context);
  if (context) {
    var imgd = context.getImageData(0, 0, 500, 300);
    var pix = imgd.data;
    for (var i = 0, n = pix.length; i < n; i += 4) {
      var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
      pix[i]   = grayscale;   // red
      pix[i+1] = grayscale;   // green
      pix[i+2] = grayscale;   // blue
    }
    context.putImageData(imgd, 0, 0);
  }
};
</script>
 </head>
  <body>
   <canvas id="area" width="500" height="300">
     <img id="canvasSource" src="http://www.treehugger.com/elephant-national-heritage-animal-india.jpg" alt="Canvas Source" />
   </canvas>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need 2d in lowercase and move the script inside the head tags

    area.getContext(‘2d’);

    HERE is some code that might work better: http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

    Here is my test html – I do not see an image yet

    <!DOCTYPE html>
<html>
 <head>
  <title> New Document </title>
<script type="text/javascript">
window.onload = function ()  {
  var area = document.getElementById('area');
  alert('area:'+area);   
  var context = area.getContext('2d');
  alert('context:'+context)
  if (context) {
    var imgd = context.getImageData(0, 0, 500, 300);
    var pix = imgd.data;
    for (var i = 0, n = pix.length; i < n; i += 4) {
      var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
      pix[i]   = grayscale;   // red
      pix[i+1] = grayscale;   // green
      pix[i+2] = grayscale;   // blue
    }
    context.putImageData(imgd, 0, 0);
  }
};
</script>
 </head>
  <body>
   <canvas id="area" width="500" height="300">
     <img id="canvasSource" src="http://www.treehugger.com/elephant-national-heritage-animal-india.jpg" alt="Canvas Source" />
   </canvas>
</body>
</html>
    • 0