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.