Html5 <canvas> element related apps not working

In summary, the website's code works in their page but not in mine. Their code also doesn't work in Codepen or JSFiddle. Their code seems to work in their page only.
  • #1
YoungPhysicist
Insights Author
350
203
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.
 
Computer science news on Phys.org
  • #2
Last edited:
  • Like
Likes sysprog
  • #3
DaveC426913 said:
Both Codepen and JSFiddle are throwing the cross-origin data error:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

It's the image that's the problem.

https://stackoverflow.com/questions...-canvas-has-been-tainted-by-cross-origin-data
So if I use other pics, it would be just fine?
 
  • #4
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.
 

Related to Html5 <canvas> element related apps not working

1. Why is my element not displaying anything?

There could be several reasons why your element is not displaying anything. Some possible causes include incorrect syntax, missing or incorrect attributes, or issues with the HTML5 element support in your browser. Make sure to check your code for any errors and test it in different browsers to troubleshoot the issue.

2. How do I make my element responsive?

To make your element responsive, you can use CSS to set its width and height to a percentage rather than a fixed value. This way, the element will adjust its size based on the size of its parent container. You can also use JavaScript to dynamically resize the element based on the window size.

3. Why is my element not working on mobile devices?

Some older mobile devices may not support the HTML5 element, which could be why your element is not working on mobile devices. Make sure to test your app on different devices and browsers to ensure compatibility. You can also use a polyfill to add support for the element on older devices.

4. How can I add interactivity to my element?

The HTML5 element provides a JavaScript API that allows you to add interactivity to your canvas. You can use this API to draw shapes, add animations, and handle user interaction. There are also many libraries and frameworks, such as p5.js and Fabric.js, that can help you create interactive element apps.

5. Can I use the element to create games?

Yes, the HTML5 element is commonly used to create games and other interactive applications. With the help of JavaScript and libraries like Phaser and CreateJS, you can create 2D and 3D games that run directly in the browser using the element. However, keep in mind that the element has its limitations, and for more complex games, you may need to use other technologies like WebGL.

Similar threads

  • Programming and Computer Science
Replies
5
Views
512
  • Programming and Computer Science
Replies
1
Views
1K
  • Programming and Computer Science
Replies
13
Views
1K
  • Programming and Computer Science
Replies
3
Views
2K
  • Programming and Computer Science
Replies
9
Views
4K
  • Programming and Computer Science
Replies
3
Views
2K
  • Programming and Computer Science
Replies
8
Views
5K
  • Programming and Computer Science
Replies
21
Views
5K
  • Programming and Computer Science
Replies
12
Views
3K
  • Programming and Computer Science
Replies
8
Views
1K
Back
Top