Html5 <canvas> element related apps not working

  • #1
Recently I want to make a image adder in html, which is just a app that add the rgb value of each pixel in simple bmp files together.It can be used to grayscales and other things.

I found this website that teches how to do that with the <canvas> element in html5.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

The problem is that although there demonstrations work on their webpage, it just don't work when I copied the code from
  • The website using the "view source code" in IE and Edge
  • Their link to CodePen

And NONE OF THE ABOVE works. Not even the CodePen page simulation could work. The only place that their code seems to work is in their page. How is that? Did I miss anything?


My code(hippo grayscale and invert):

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://developer.mozilla.org/static/build/styles/samples.37902ba3b7fe.css" rel="stylesheet" type="text/css" />
       
        <title>Pixel manipulation with canvas - Grayscaling_and_inverting_colors - code sample</title>
    </head>
    <body>
       
            <canvas id="canvas" width="300" height="227"></canvas>
<div>
  <input id="grayscalebtn" value="Grayscale" type="button">
  <input id="invertbtn" value="Invert" type="button">
</div>
       
       
            <script>
                var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
img.onload = function() {
  draw(this);
};
function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;
   
  var invert = function() {
    for (var i = 0; i < data.length; i += 4) {
      data[i]     = 255 - data[i];     // red
      data[i + 1] = 255 - data[i + 1]; // green
      data[i + 2] = 255 - data[i + 2]; // blue
    }
    ctx.putImageData(imageData, 0, 0);
  };
  var grayscale = function() {
    for (var i = 0; i < data.length; i += 4) {
      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i]     = avg; // red
      data[i + 1] = avg; // green
      data[i + 2] = avg; // blue
    }
    ctx.putImageData(imageData, 0, 0);
  };
  var invertbtn = document.getElementById('invertbtn');
  invertbtn.addEventListener('click', invert);
  var grayscalebtn = document.getElementById('grayscalebtn');
  grayscalebtn.addEventListener('click', grayscale);
}
            </script>
       
    </body>
</html>
Which is exactly what they posted on codepen.
 

Answers and Replies

  • #3
  • #4
DaveC426913
Gold Member
21,364
4,832
Read the stackoverflow comments and experiment.
Search for similar questions. There are a few.

I tried a few of their solutions but couldn't get any to work. It might still be a x-domain issue, and it might go away in your dev environment at least.
You may have to add some config to your server to allow x-domain data.
 

Suggested for: Html5 <canvas> element related apps not working

Replies
4
Views
1K
Replies
8
Views
2K
Replies
2
Views
611
Replies
6
Views
939
Replies
17
Views
638
  • Last Post
Replies
12
Views
1K
  • Last Post
Replies
6
Views
570
Replies
3
Views
138
  • Last Post
Replies
1
Views
576
Top