Create multiple independent canvas drawing boards

Question

If I want to create more than one canvas drawing board in a page, and make then work independently.

The method I tried is below: http://dev.opera.com/articles/view/html5-canvas-painting/

And what I did is like adding these:

canvas = document.getElementById('imageView');
context = canvas.getContext('2d');
canvas2 = document.getElementById('imageView2');
context2 = canvas2.getContext('2d');**

tool = new tool_pencil();

canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);
canvas2.addEventListener('mousedown', ev_canvas, false);
canvas2.addEventListener('mousemove', ev_canvas, false);
canvas2.addEventListener('mouseup',   ev_canvas, false);

And the drawing is all come to the first canvas. Could anyone give me a complete code to achieve the goal?

Furthermore, how if I want to store information of each whiteboard? Like remember all drawing of a whiteboard (not to save it as a .jpg). Thanks!

Answer 1

Looks like the function paints on the first canvas no matter what event fired it. You could do this :

...
function ev_mousemove (ev) {
 var x, y;
 var context = ev.target.getContext('2d');
...

Which should reroute the following functions to the correct canvas.