使用自由形式绘制图像 <canvas> 和javascript

Question

I have been trying to find a good resource to point me in the correct direction and I'd really like someone to help me in this regard.

I'm developing an app that uses phonegap, js and html5. One component of this app is to have an image that can be overlayed with freeform scribbles.

I'm not sure if its the canvas object I should be using and if so how do I go about implementing a drawing solution.

Answer 1

You create a and position it absolute over image.

can have transparent pixels (alpha=1.0) and those pixels will display the underlying image.

Then you flip pixels accordingly your scribbling to black etc. You need to listen to touch events, transform their coordinates to coordinates and then use canvas.getContext() draw operation to manipulate pixels hitting in those coordinates.

If you need further assistance please ask individual questions for each part as a complete solution would be longish source code and outside the scope of simply answering the questions.