SHOW:
|
|
- or go back to the newest paste.
1 | function draw() { | |
2 | - | var draw = false; |
2 | + | var draw = false, |
3 | - | var context = document.getElementById('desc'); |
3 | + | context = document.getElementById('desc'), |
4 | - | canvas = context.getContext('2d'); |
4 | + | canvas = context.getContext('2d'); |
5 | ||
6 | canvas.lineWidth = 5; | |
7 | - | draw=true; |
7 | + | canvas.lineCap = 'round'; |
8 | ||
9 | - | },false); |
9 | + | |
10 | draw = true; | |
11 | canvas.beginPath(); | |
12 | - | draw=false; |
12 | + | }, false); |
13 | - | },false); |
13 | + | |
14 | context.addEventListener('mouseup', function() { | |
15 | draw = false; | |
16 | - | if (draw==true) { |
16 | + | }, false); |
17 | - | canvas.lineWidth=5; |
17 | + | |
18 | - | canvas.lineCap='round'; |
18 | + | |
19 | var newX = e.pageX - context.offsetLeft, | |
20 | - | var x,y; |
20 | + | newY = e.pageY - context.offsetTop; |
21 | - | x=e.pageX; |
21 | + | |
22 | - | y=e.pageY; |
22 | + | if (draw) { |
23 | - | |
23 | + | setTimeout(function() { |
24 | - | setTimeout(function(){ |
24 | + | canvas.lineTo(newX, newY); |
25 | - | canvas.lineTo(x - context.offsetLeft, y - context.offsetTop); |
25 | + | canvas.moveTo(newX, newY); |
26 | - | canvas.moveTo(x - context.offsetLeft, y - context.offsetTop); |
26 | + | |
27 | }, 1); | |
28 | - | },1); |
28 | + | |
29 | }); | |
30 | } |