var imageX = 0;
    var imageY = 0;
    var time = 0;
    var mouseX;
    var mouseY;
    (function() {
      var canvas = this.__canvas = new fabric.Canvas('c');
      var ctx = document.getElementById("c").getContext("2d");
      ctx.imageSmoothingEnabled = 0;


      var Pattern = fabric.util.createClass(fabric.Object, {
        objectCaching: false,
        initialize: function(options) {},

        _render: function(ctx) {
          ctx.fillStyle = "rgb(255,0,0)";
          ctx.fillRect(0, 0, 400, 400);

          for (var j = -120 / 3; j < 1600 / 3 * 400 / 300; j += 16 / 3) {
            for (var i = -100 / 3; i < 900 / 3 * 400 / 238; i += 1) {
              var y = j / 1.5 + mouseX / 15 * Math.cos((i * 3) * Math.PI / 180);
              var x = i + mouseY / 15 * Math.sin((y * 3) * Math.PI / 180);
              var z = ((j * (100 + mouseY / 10) + y + 310 * 100) % 155 + 100);
              if (z < 55) {
                ctx.fillStyle = "rgb(255,0,0)";
              } else if (z < 120) {
                ctx.fillStyle = "rgb(0,255,0)";
              } else if (z < 180) {
                ctx.fillStyle = "rgb(0,0,255)";
              } else {
                ctx.fillStyle = "rgb(0,0,0)";
              }
              ctx.fillRect(Math.floor(x / 1) * 1, Math.floor(y / 1) * 1, 3, 2);

            }
          }
        }
      });

      var pattern = new Pattern();

      var rect1 = new fabric.Rect({
        width: 200,
        height: 100,
        left: 0,
        top: 50,
        angle: 30,
        fill: 'rgba(255,0,0,0.5)'
      });

      var rect2 = new fabric.Rect({
        width: 100,
        height: 100,
        left: 350,
        top: 250,
        angle: -10,
        fill: 'rgba(0,200,0,0.5)'
      });

      var rect3 = new fabric.Rect({
        width: 50,
        height: 100,
        left: 275,
        top: 350,
        angle: 45,
        stroke: '#eee',
        strokeWidth: 10,
        fill: 'rgba(0,0,200,0.5)'
      });

      var circle = new fabric.Circle({
        radius: 50,
        left: 275,
        top: 75,
        fill: '#aac'
      });

      var triangle = new fabric.Triangle({
        width: 100,
        height: 100,
        left: 50,
        top: 300,
        fill: '#cca'
      });

      canvas.add(pattern, rect1, rect2, rect3, circle, triangle);

      canvas.on({
        'object:moving': onChange,
        'object:scaling': onChange,
        'object:rotating': onChange,
      });

      function onChange(options) {
        options.target.setCoords();
        canvas.forEachObject(function(obj) {
          if (obj === options.target) return;
          obj.set('opacity', options.target.intersectsWithObject(obj) ? 0.5 : 1);
        });
      }

      setTimeout(function animate() {
        //  draw();
        canvas.renderAll();
        setTimeout(animate, 1000 / 60);
      }, 1000 / 60);

      canvas.on('mouse:move', function(options) {
        var p = canvas.getPointer(options.e);
        mouseX = p.x;
        mouseY = p.y;
        console.log("X: " + mouseX + " Y: " + mouseY);
      });

    })();