"Painting" elements in html5 canvas

Question

I'm making a game in coffeescript (although for the sake of this problem that's probably not all that relevant) and html5's canvas. It's a game that involves a paint cannon, that fires circular particles of paint that can paint elements of the level and the player. The problem is I'm not sure how to accomplish the painting. The diagram below illustrates what I'm trying to accomplish:

Using canvas, the particles are drawn using context.arc(), the players using drawRect.arc() and the floor can be an arbitrary polygon with drawing code as follows:

    @drawingContext.beginPath();

    tV = b2Math.AddVV(pos, b2Math.MulMV(body.GetTransform().R, @vertices[0]))
    @drawingContext.moveTo(tV.x, tV.y)
    for i in [[email protected] - 1]
        v = b2Math.AddVV(pos, b2Math.MulMV(body.GetTransform().R, @vertices[i]))

        @drawingContext.lineTo(v.x, v.y)
    @drawingContext.lineTo(tV.x, tV.y)

    @drawingContext.closePath()
    @drawingContext.stroke() 
    @drawingContext.fill()

It would be too intensive to keep track of all the circles that should be painted on to objects and would soon bog down, with potentially 60 clipped circles per second being added to be drawn on top of objects.

The original thought was to stack two canvases on top of each other, so then we could draw the levels once and then when ever necessary just draw the paint splat over them once and forget about it (changing the composition mode to source-atop to get appropriate clipping), and since we're not redrawing it would stay there. However, this won't work on moving objects (like players) (that can also rotate and change size relative to the camera). I'm not sure how to do it, since all objects are made up of solid colour to start with there's no texture data or anything we can modify.

Answer 1

Your best bet would probably be to use images, with several variations with paint on them. E.g. have one image with paint on the left, one with paint on the right, one with more paint on the right, one with more paint on the left, you get the idea. When something get's hit with paint just change the image to one of those. When it get's hit again change it to one with more paint splats, and so on, until it's covered with paint.

If you wanted something a bit more robust you could manipulate the actually pixels of the image and change it to have a circle on it when it's hit. This would be harder however. Google 'canvas getImageData' for more on this.

Hope this helps and best of luck on your game!

Answer 2

I realize that this question already has an accepted answer, but I wanted to point this out.

If you don't need to redraw the rectangles at each frame, then you can just paint over them and not redraw them. That way, if something moves over the rectangle and is drawn, then it will still be there if the rectangle isn't drawn again.

You could also make something like this: if a circle is colliding with a rectangle, add the current circle to a rectange's array of circles that have collided with it, and redraw only the portion that each circle overlaps with the rectangle