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 | } |