Drawing-App/javascript.js at master · nnikolic1986/Drawing-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
$(function(){

    var paint = false;
    var paint_erase = "paint";
    var canvas = document.getElementById("paint");
    var ctx = canvas.getContext("2d");
    var container = $("#container");
    var mouse = {x:0, y:0};


    if(localStorage.getItem("imgCanvas") !=null){
      var img = new Image();
      img.onload = function(){
          ctx.drawImage(img, 0, 0);
      }
      img.src = localStorage.getItem("imgCanvas");
    };


    ctx.lineWidth = 3;
    ctx.lineJoin = "round";
    ctx.lineCap = "round";

    container.mousedown(function(e){
      paint = true;
      ctx.beginPath();
      mouse.x = e.pageX - this.offsetLeft;
      mouse.y = e.pageY - this.offsetTop;
      ctx.moveTo(mouse.x, mouse.y);
    });

    container.mousemove(function(e){
      mouse.x = e.pageX - this.offsetLeft;
      mouse.y = e.pageY - this.offsetTop;
        if(paint == true){
            if(paint_erase == "paint"){
                ctx.strokeStyle = $("#paintColor").val();
            }else{
                ctx.strokeStyle = "white";
            }
            ctx.lineTo(mouse.x, mouse.y);
            ctx.stroke();
        }
    });

    container.mouseup(function(){
       paint = false;
    });

    container.mouseleave(function(){
       paint = false;
    });


    $("#reset").click(function(){
       ctx.clearRect(0, 0, canvas.width, canvas.height);
        paint_erase = "paint";
        $("#erase").removeClass("eraseMode");
    });


    $("#save").click(function(){
        if(typeof(localStorage) != null){
        localStorage.setItem("imgCanvas", canvas.toDataURL());
    }else{
        window.alert("ne podrzava lokal storage");
    }
    })


    $("#erase").click(function(){
       if(paint_erase == "paint"){
           paint_erase = "erase";
       }else{
           paint_erase = "paint";
       }
        $(this).toggleClass("eraseMode");
    });


    $("#paintColor").change(function(){
       $("#circle").css("background-color", $(this).val());
    });


    $("#slider").slider({
       min: 3,
       max: 30,
       slide: function(event, ui){
           $("#circle").height(ui.value);
           $("#circle").width(ui.value);
           ctx.lineWidth = ui.value;
       }
   });


});