Image doesn´t appear canvas

Question

I'm using canvas for the first time, and i´m practicing getting data from image to change its properties. The thing is i'm using this code:

       <script type="text/javascript" src="jquery-3.3.1.min.js">
       </script>
       <script type="text/javascript">
        $(document).ready(inicio);
        function inicio() {
        setTimeout(drawing(),100000);
        }
        function drawing() {
        var canvas = document.getElementById("cnv1");
        var context = canvas.getContext("2d");

        var img = new Image();
        img.src = "tomatoes.jpg"
        context.drawImage(img, 10, 10);

        var imageData = context.getImageData(0, 0, 500, 500);
        var data = imageData.data;

        /*for (var i=0; i<data.length; i+= 4) {
            data[i]   = 255-data[i];
            data[i+1] = 255-data[i+1];
            data[i+2] = 255-data[i+2];

        }*/

        /*for (var i=0; i<data.length; i+= 4) {
            data[i]   = data[i]+100;
            data[i+1] = data[i+1]+100;
            data[i+2] = data[i+2]+100;

    }*/

        for (var i=0; i<data.length; i+= 4) {
            data[i]   = data[i]-100;
            data[i+1] = data[i+1]-100;
            data[i+2] = data[i+2]-100;

        }

         context.putImageData(imageData,0,0)

    }
</script>
<style type="text/css">
    canvas {
        border: 1px solid black;
    }
</style>

I'm getting the correct results for the For Methods, my problem is most of the time the image doesn't loads at all, it just appears on one page refresh, and the next refresh is gone, it doesn't work properly. Any ideas?.

yeah it seems a problem with the setTimeout not been the proper way to led the picture to load. Very helpful. — Fernando Payares, Oct 11 '18 at 16:46

score 1 · Accepted Answer · answered Oct 10 '18 at 19:14

Next comes my code but it won't work on Stack Overflow. You will have to copy the code and test it in your computer. You can see it working in this Codepen project.

IMPORTANT: you have to use an image from your site. Otherwise you'll get an error like this: Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. And yes, there are some ways to circumvent this problem. Not always working

An observation about your code: Please don't do this: data[i]-100 since data[i] may be smaller than 100.

function drawing() {
  var data;
  var canvas = document.getElementById("cnv1");
  var cw = (canvas.width = 270);
  var ch = (canvas.height = 250);
  var context = canvas.getContext("2d");

    var img=new Image();
                    img.src = "image.jpg";
                    img.onload = function() {
                    context.drawImage(this, 10, 10);

    var imageData = context.getImageData(0, 0, 270, 250);
    data = imageData.data;

    console.log(imageData.data)


    for (var i = 0; i < data.length; i += 4) {
      data[i] = 255 - data[i];
      data[i + 1] = 255 - data[i + 1];
      data[i + 2] = 255 - data[i + 2];
    }

    context.putImageData(imageData, 0, 0);
  }
}
drawing()

<canvas id="cnv1"></canvas>

Thank you, I see that you don't use the setTimeout() Method, and that's something i've asking myself, if it is not very reliable. — Fernando Payares, Oct 10 '18 at 21:15

Image doesn´t appear canvas

1 Answers1