picturelements.github.io/kaleido.html at master · PicturElements/picturelements.github.io · 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
<!--Kaleido - an experiment by PicturElements-->

<!DOCTYPE html>
<html>
  <head>
    <title>Kaleido - PicturElements</title>
    <link rel="icon" href="pelement.png">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="stylesheet" type="text/css">
    <style>
      body{
        background-color:#333;
        margin:0;
        overflow:hidden;
      }
      #canvas{
        display:block;
        position:fixed;
        top:50%;
        left:50%;
        background-color:#eee;
        border-radius:3000px;  /*ridiculously large radius to ensure circular canvas*/
        cursor:url(images/penCursor.png),url(images/penCursor.cur),auto;
      }
    </style>
    <script>
      var pressed=0;
      var side,xOff,yOff;  //canvas width
      var xPos=[-1000],yPos=[-1000];

      function init(){
        if (window.innerHeight>window.innerWidth){
          side=window.innerWidth*0.9;
          xOff=window.innerWidth*0.05;
          yOff=(window.innerHeight-window.innerWidth*0.9)/2;
        }else{
          side=window.innerHeight*0.9;
          xOff=(window.innerWidth-window.innerHeight*0.9)/2;
          yOff=window.innerHeight*0.05;
        }
        var canv=document.getElementById("canvas");
        canv.width=side;
        canv.height=side;
        canv.style.width=side;
        canv.style.height=side;
        canv.style.marginTop="-"+side/2+"px";
        canv.style.marginLeft="-"+side/2+"px";
      }

      function press(inId){
        pressed=inId;
        if (inId==0&&xPos[xPos.length-1]!=-1000){
          xPos.push(event.clientX-xOff);
          yPos.push(event.clientY-yOff);
          xPos.push(-1000);
          yPos.push(-1000);
        }
      }

      function draw(){
        if (pressed==1){
          if (Math.hypot(event.clientX-xOff-xPos[xPos.length-1],event.clientY-yOff-yPos[yPos.length-1])>2.5){   //save points
            xPos.push(event.clientX-xOff);
            yPos.push(event.clientY-yOff);
          }
          paint();
        }
      }

      function paint(){
        var ctx=document.getElementById("canvas").getContext("2d");
        ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
        ctx.strokeStyle="#222";
        ctx.lineWidth=2;
        if (xPos.length>1){
          for (i=0;i<xPos.length-1;i++){
            if (xPos[i]==-1000){
              if (i!=0){ctx.stroke();}
              ctx.beginPath();
              ctx.moveTo(xPos[i+1],yPos[i+1]);
              i++;
            }else{
              ctx.lineTo(xPos[i],yPos[i]);
            }
          }
          ctx.lineTo(event.clientX-xOff,event.clientY-yOff);
          ctx.stroke();
        }
      }
    </script>
  </head>
  <body onload=init()>
    <canvas id="canvas" onmousedown=press(1) onmousemove=draw() onmouseup=press(0)></canvas>
  </body>
</html>