daniel-san.html

<canvas id="autogrf" width="600" height="600"></canvas>
<script>
  var lines=[
    {
      color:"#0000ff",
      path:[
        [false,53,88],
        [false,83,88],
      ],
      weight:1
    },
    {
      color:"#0000ff",
      path:[
        [false,97,88],
        [false,123,88],
      ],
      weight:1
    },
    {
      color:"#0000ff",
      path:[
        [false,80,115],
        [false,100,115],
      ],
      weight:1
    },
    {
      color:"#0000ff",
      path:[
        [false,85,75],
        [false,75,64],
      ],
      weight:0.5
    },
    {
      color:"#0000ff",
      path:[
        [false,95,75],
        [false,105,64],
      ],
      weight:0.5
    },
    {
      color:"#0000ff",
      path:[
        [false,65,98],
        [false,75,94],
      ],
      weight:0.5
    },
    {
      color:"#0000ff",
      path:[
        [false,115,98],
        [false,105,94],
      ],
      weight:0.5
    },
    {
      color:"#0000ff",
      path:[
        [false,84,82],
        [false,86,88],
        [false,83,92],
      ],
      weight:0.5
    },
    {
      color:"#0000ff",
      path:[
        [false,96,82],
        [false,94,88],
        [false,97,92],
      ],
      weight:0.5
    },
    {
      color:"#aaaaaa",
      path:[
        [false,82,95],
        [false,80,97],
        [false,82,99],
        [false,86,99],
        [false,88,101],
        [false,92,101],
        [false,94,99],
        [false,98,99],
        [false,100,97],
        [false,98,95]
      ],
      weight:1
    },
    {
      color:"#aaaaaa",
      path:[
        [false,72,72],
        [false,82,82],
      ],
      weight:2
    },
    {
      color:"#aaaaaa",
      path:[
        [false,108,72],
        [false,98,82],
      ],
      weight:2
    },
    {
      color:"#aaaaaa",
      path:[
        [false,46,70],
        [false,82,82],
      ],
      weight:4
    },
    {
      color:"#aaaaaa",
      path:[
        [false,134,70],
        [false,98,82],
      ],
      weight:4
    },
    {
      color:"#aaaaaa",
      path:[
        [false,91,107],
        [false,110,110],
        [false,110,125],
      ],
      weight:10
    },
    {
      color:"#aaaaaa",
      path:[
        [false,89,107],
        [false,70,110],
        [false,70,125],
      ],
      weight:10
    },
    {
      color:"#aaaaaa",
      path:[
        [false,50,120],
        [false,65,125],
        [false,90,130],
        [false,90,120],
        [false,90,130],
        [false,115,125],
        [false,130,120],
      ],
      weight:15
    },
    {
      color:"#aaaaaa",
      path:[
        [false,35,95],
        [false,53,120],
      ],
      weight:25
    },
  ];
  var multiplekser=2;
  var drawObjects=[
    {
      color:"#aaaaaa",
      path:[
        [false,90,30],
        [false,50,40],
        [false,40,50],
        [false,35,70],
        [false,35,73],
        [false,30,70],
        [false,27,72],
        [false,29,80],
        [false,30,90],
        [false,31,92],
        [false,33,90],
        [false,36,88],
        [false,40,100],
        [false,50,120],
        [false,80,130],
        [false,90,130],
      ],
      mirror:true
    }
    /*{
      kolor:"#0000ff",
      drawo:[[80,10],[80,60],[100,60],[120,50],[115,40],[100,35],[110,20],[95,10],[80,10],[85,20],[100,20],[100,25],[85,35],[85,45],[100,45],[105,50],[100,53],[90,53],[90,10]]
    }*/
  ];

  function drawAutograf(){
    var majsterStick=document.getElementById("autogrf");
    var cont=majsterStick.getContext("2d");
    cont.clearRect(0, 0, majsterStick.width, majsterStick.height);
    console.log(drawObjects);
    for(var k=0;k<drawObjects.length;k++){
      var tmpDrawData=[];
      console.log(drawObjects[k].color);
      cont.fillStyle = drawObjects[k].color;
      cont.beginPath();
      if(drawObjects[k].path[0][0]){
        cont.moveTo((drawObjects[k].path[0][1]+Math.random())*multiplekser, (drawObjects[k].path[0][2]+Math.random())*multiplekser);
      }else{
        cont.moveTo((drawObjects[k].path[0][1])*multiplekser, (drawObjects[k].path[0][2])*multiplekser);
      }
      for(i in drawObjects[k].path){
        tmpDrawData.push(["draw",drawObjects[k].path[i][1],drawObjects[k].path[i][2]]);
        if(drawObjects[k].path[i][0]){
          cont.lineTo((drawObjects[k].path[i][1]+Math.random())*multiplekser, (drawObjects[k].path[i][2]+Math.random())*multiplekser);
        }else{
          cont.lineTo((drawObjects[k].path[i][1])*multiplekser, (drawObjects[k].path[i][2])*multiplekser);
        }
      }
      if(drawObjects[k].mirror){
        for(var i=drawObjects[k].path.length-1;i>0;i--){

          tmpDrawData.push(["draw",180-drawObjects[k].path[i][1],drawObjects[k].path[i][2]]);
          if(drawObjects[k].path[i][0]){
            cont.lineTo((180-drawObjects[k].path[i][1]+Math.random())*multiplekser, (drawObjects[k].path[i][2]+Math.random())*multiplekser);
          }else{
            cont.lineTo((180-drawObjects[k].path[i][1])*multiplekser, (drawObjects[k].path[i][2])*multiplekser);
          }
        }
      }
      cont.closePath();
      cont.fill();
      //console.log(tmpDrawData);
    }
    for(var k=0;k<lines.length;k++){
      cont.lineWidth=lines[k].weight;
      cont.beginPath();
      if(lines[k].path[0][0]){
        cont.moveTo((lines[k].path[0][1]+Math.random())*multiplekser, (lines[k].path[0][2]+Math.random())*multiplekser);
      }else{
        cont.moveTo(lines[k].path[0][1]*multiplekser, lines[k].path[0][2]*multiplekser);
      }
      for(var i=1; i<lines[k].path.length;i++){
        if(lines[k].path[i][0]){
          cont.lineTo((lines[k].path[i][1]+Math.random())*multiplekser, (lines[k].path[i][2]+Math.random())*multiplekser);
        }else{
          cont.lineTo(lines[k].path[i][1]*multiplekser, (lines[k].path[i][2])*multiplekser);
        }
      }
      cont.stroke();
    }
  }
  setInterval(function(){drawAutograf();},100);
  //autograf.moveTo(litery.bLettero[0][0], litery.bLettero[0][1]);
</script>