HTML canvas element not displaying image

Question

I was trying to use this tutorial to make a color picker. I am not very familiar with the canvas element, so I am just testing with the code from that link. I set the image src with a few different images, and none of them are appearing.

I'm not sure what i'd have to change to make it appear, but I tried changing the src, and that is not the problem. Basically when you click on the color wheel (the image on the canvas) an alert should pop up with the rgba value.

If I had to guess, maybe the problem is here? I would think you need an src before telling it what to do when it loads.

image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height);
image.src="https://i.sstatic.net/flqeC.jpg?s=256";

This is a jsfiddle with the code I have. I'm not the most experienced so this may be silly fix, but I appreciate any help!

You have to call your initColorPicker() method, but since you are using image from a different domain, getImageData() will not work. Try downloading the image to your local server and reference it from there. — Anurag Srivastava
– Anurag Srivastava, Commented Jul 16, 2019 at 6:20

SHUBHAM SINGH · Accepted Answer · 2019-07-16 16:59:47Z

1

In local its working fine here is full code

<!DOCTYPE html>
    <html lang="en">
    <head>

        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            body {
                background-color: red;
            }

            #colorCanvas {
                border: 1px solid #000000;
                background-color:blue
            }
        </style>
    </head>
    <body>
    <h1>Test</h1>
    <canvas id="colorCanvas" class="color-canvas" width="250" height="250"></canvas>
    </body>
    <script type="text/javascript">
        function initColorPicker() {
            var canvasEl = document.getElementById('colorCanvas');
            var canvasContext = canvasEl.getContext('2d');

            var image = new Image(250, 250);

            image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height);
            image.src =  "http://localhost/test/assets/img/color.jpg";

            canvasEl.addEventListener('click', function (mouseEvent) {
                {
                    var imgData = canvasContext.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);
                    var rgba = imgData.data;

                    alert("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");
                }

            })
        }

        initColorPicker();
    </script>
    </html>

answered Jul 16, 2019 at 16:59

SHUBHAM SINGH

3773 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SHUBHAM SINGH Over a year ago

just copy the whole code and run it will show an alert

SHUBHAM SINGH · Accepted Answer · 2019-07-16 06:36:10Z

0

Use Local Path of Image save that image in your local server otherwise you will get cross origin issue and then use this code

 function initColorPicker()
    {
        var canvasEl = document.getElementById('colorCanvas');
        var canvasContext = canvasEl.getContext('2d');

        var image = new Image(250, 250);

        image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height);
        image.src="https://i.sstatic.net/flqeC.jpg?s=256";

        canvasEl.addEventListener('click', function(mouseEvent) {
        {
          var imgData = canvasContext.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);
          var rgba = imgData.data;

          alert("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");
        }

    })
    }
    initColorPicker();

edited Jul 16, 2019 at 6:36

answered Jul 16, 2019 at 6:17

SHUBHAM SINGH

3773 silver badges12 bronze badges

3 Comments

Anurag Srivastava Over a year ago

OP will still not get the values in alert

SHUBHAM SINGH Over a year ago

@AnuragSrivastava check above code just modified , use addEventListener and use local path of your image

joelanbanks3 Over a year ago

I switched it to the local path but I'm still not seeing anything, I checked that the path was right but nothing pops up in the canvas

Collectives™ on Stack Overflow

HTML canvas element not displaying image

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related