How can I draw on top of image using HTML Canvas?

Question

I am looking to achieve a sort of "color in the image" effect.

I have several images of a giraffes head , all tinted different colours. I would like to be able to "colour in" the image by revealing the tinted image by using your mouse to draw a shape, and only the intersection shows. Where the untinted image of the giraffe is defaulted to show, and if you use your mouse to draw on top of the image, where you drew would reveal a tinted image of the giraffe, revealing a sort of "colouring in" of the image.

Here's what I have so far. I'm using the MDN documentation of Canvas globalCompositeOperation as reference. But I'm stuck at a pretty early stage:

function animate() {
    // canvasContext.clearRect(0, 0, canvas.width, canvas.height);
    // canvasContext.drawImage(image2, (canvas.width/2) - (image2.width/2), (canvas.height/2) - (image2.height/2), image2.width, image2.height); // if this line is removed, we can draw the image, but theres no starting image
    canvasContext.save();
    canvasContext.beginPath();
    canvasContext.arc(touchX, touchY, 20, 0, Math.PI*2, false);
    canvasContext.clip();
    canvasContext.drawImage(image1, (canvas.width/2) - (image1.width/2), (canvas.height/2) - (image1.height/2), image1.width, image1.height);
    canvasContext.restore();
    window.requestAnimationFrame(animate);
}

I can't even get the ellipse 'brush' to stay on the canvas and fill in the shape of the giraffe. Nothing seems to be working for me.

Here's a JSFiddle of it not working. The touchmove is working in my project environment, just not in the Fiddle for some reason.

-- Update: I can get the tinted image to be "painted" onto the screen in the shape of the giraffe, using clip. But when I render the untinted image before, the "colouring in" effect doesn't work.

Answer 1

Figured it out! Looks like clip() with two layered canvas elements was the answer, instead of globalCompositeOperation .

The following code achieves this 'colouring in' effect .

function handleOnPointerDown(event) {
    touchX = event.touches[0].clientX;
    touchY = event.touches[0].clientY;
}

function animate() {
    displayImageOnCanvas(canvas, canvasContext, loadedImage[0]);

    canvasContext2.save();
    canvasContext2.beginPath();
    canvasContext2.globalAlpha = 0.5;
    canvasContext2.arc(touchX, touchY, 20, 0, Math.PI*2, false);
    canvasContext2.clip();
    if (colourState === 1) {
        // red tinted
        displayImageOnCanvas(canvas2, canvasContext2, loadedImage[1]);
    } else if (colourState === 5) {
        // blue tinted
        displayImageOnCanvas(canvas2, canvasContext2, loadedImage[5]);
    }
    canvasContext2.restore();
    window.requestAnimationFrame(animate);
}