0

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!

Juergen
  • 12,378
  • 7
  • 39
  • 55
user3287327
  • 3
  • 2
  • 1
    Welcome to SO. It's not encouraged to ask for complete code. Instead you should ask for help on solving a specific problem. See [ask]. – simbabque Feb 08 '14 at 14:51
  • Sorry man, I'm new here. I apology for that.. And thanks for any kind of help here :) – user3287327 Feb 08 '14 at 15:05

1 Answers1

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.

ElDoRado1239
  • 3,938
  • 2
  • 16
  • 13