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!
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.