How do I clear image for redrawing?

Question

I need to find a way to change the picture when the user clicks on it, I seem to be having problems.

heres my code:

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var img = new Image();

        img.src = 'Birthday.jpg';

        img.onload = function() {
            context.drawImage(img, 47, 90, 200, 300);
        };

        }

Ive already tried things like:

img.onclick = function() {
            context.clearRect(47, 90, 200, 300);
            img2.src = 'BirthdayOUT.jpg';
            context.drawImage(img2, 47, 90, 200, 300);
        };

score 0 · Answer 1 · answered Mar 08 '14 at 04:00

When you paint an image to the canvas you do not paint the image element itself, just a bitmap representation.

This means that the img.onclick will never fire. Instead, you must manually keep track of where you drew the image and use a canvas onclick, determine if you clicked on the image, and then change the draw the new image.

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

Your problem is not the clearing of the canvas, but the click event handling.
The img.onclick is not firing because the picture on the canvas is not an Image object. See this as an example.

edited May 23 '17 at 12:03

Community

1
1

answered Mar 08 '14 at 04:05

BLiu1

75
1
6

score 0 · Answer 3 · answered Mar 08 '14 at 04:06

0

you should create your img.onload function before you set the src, if not the onload may never fire.

answered Mar 08 '14 at 04:06

QBM5

2,778
2
17
24

score 0 · Answer 4 · answered Mar 08 '14 at 11:45

I'm not sure what you're trying to achieve here but if you just want to have an image on the page, don't use the 'canvas' and change the image via the 'src' property.
However, if you want to have this on a canvas - which I suspect - you have to store the coordinates/dimensions of the image when it is drawn. Then, to change the picture, use 'clearRect()' to blank that area and draw the new image.

Note that in your code, the 'img' is not passed to the canvas as an element, but as a bitmap, as mentioned by 'Simon Sarris'. That means, your handler for the 'onclick' event must be assigned to the canvas. Then check whether the click occourred within the borders of the image. to achieve that, you need to access 'clientX' and 'clientY' from the event object which declare the position of the mouse click relative to the client area. Make sure to keep your img coordinates relative to the client area too.

Javascript:

window.onload = init;

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();

function init(){
    img.src = 'Birthday.jpg';
    context.drawImage(img, /* your img coords */ );
    canvas.addEventListener('click', onCanvasClick);
}

function onCanvasClick(event){
    var clickX = event.clientX;
    var clickY = event.clientY;

    if ( clickX > imgLeft && clickX < imgRight   &&   clickY > imgTop && clickY < imgBottom ){ changePicture(); }
}

function changePicture(){
    context.clearRect( /* your img coords */ );
    img.src = /* new img URL */;
    // save new img coords before next step
    context.drawImage(img, /* your new img coords */ );
}

Image coordinates called 'imgLeft', 'ImgRight', 'ImgTop', 'imgBottom' / relative to client area! You may have to modify the function name in 'addEventListener()', I'm not entirely sure. Maybe put the following:

canvas.addEventListener('click', function(){ onCanvasClick(); });

You can find information on the event object on http://www.w3schools.com/jsref/dom_obj_event.asp — Sam, Mar 08 '14 at 11:56
This is very close but it isnt loading the picture at all now (even on start up). The only thing is that it does in fact clear that section of the canvas. — user3395066, Mar 09 '14 at 00:03
If I take the part of the code: img.src = 'Birthday.jpg'; out of the functions it will atleast draw the picture, but sill wont change on click. — user3395066, Mar 09 '14 at 00:18
Seems to be a resource loading error. Error sources could be that your file path is incorrect or the image coordinates point to an area outside the canvas. I'm wondering how it can draw the picture although you deleted its definition though. Be aware that your file path may be incorrect of you have defined a URL. But please post your code below, that makes it way easier :) — Sam, Mar 10 '14 at 17:08

How do I clear image for redrawing?

4 Answers4