CODEWITHSUNDEEP
javascriptjqueryhtmlcanvashtml5-canvas
Nitish Mahna
Nitish Mahna

Reputation: 71

Drawing lines in canvas html

I am trying to make a canvas where user can draw some lines and also can remove them. Everything is working fine but when I remove some line and then try to draw some other line, the deleted lines also get visible. As the mouse down performs, deleted lines get visible. Please help me solving this issue. 

<html>
    <script type="text/javascript" src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $("#can").mousemove(function(e){handleMouseMove(e);});
        })
    </script>
    <script type="text/javascript">
        var arr_points = new Array();
        var canvas;
        var isDown;
        function init() {
            canvas = new fabric.Canvas('c', {
                selection: false
            });
            canvas.on('mouse:down', function(o) {
                isDown = true;
                var pointer = canvas.getPointer(o.e);
                start_point_x = pointer.x;
                start_point_y = pointer.y;
                var points = [pointer.x, pointer.y, pointer.x, pointer.y];
                line = new fabric.Line(points, {
                    strokeWidth: 2,
                    fill: 'red',
                    stroke: 'red',
                    originX: 'center',
                    originY: 'center'
                });
                canvas.add(line);
            });
            canvas.on('mouse:move', function(o) {
                if (!isDown) return;
                var pointer = canvas.getPointer(o.e);
                line.set({
                    x2: pointer.x,
                    y2: pointer.y
                });
                canvas.renderAll();
            });
            canvas.on('mouse:up', function(o) {
                var pointer = canvas.getPointer(o.e);
                var point_x = pointer.x;
                var point_y = pointer.y;
                arr_points.push([start_point_x,start_point_y,point_x,point_y]); 
                $(".canvas-container").append(
                    "<a class='remove_line' start_point_x='" + start_point_x + "' start_point_y='" + start_point_y + "' end_point_x='" + point_x +
                    "' end_point_y='" + point_y + "' href='#'><span style='position:absolute; left:" + (point_x + 10) + "px; top:" + (point_y - 7) + "px;'>X</span></a>"
                )
                isDown = false;
            });
        }
        $(document).on('click','.remove_line',function(){
            var len = arr_points.length;
            var start_x = $(this).attr("start_point_x");
            var start_y = $(this).attr("start_point_y");
            var end_x = $(this).attr("end_point_x");
            var end_y = $(this).attr("end_point_y");
            for(i=0; i<len; i++){
                if(start_x == arr_points[i][0] && start_y == arr_points[i][1] && end_x == arr_points[i][2] && end_y == arr_points[i][3]){
                    var temp_index = i;
                }
            }
            arr_points.splice(temp_index, 1);
            $(this).remove();
            var canvas=document.getElementById("c");
            var context=canvas.getContext("2d");
            context.canvas.width = context.canvas.width;
            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
            var newlen = arr_points.length;
            for(i=0; i<newlen; i++){
                context.beginPath();
                context.strokeStyle ='red';
                context.lineWidth = 2;
                context.moveTo(arr_points[i][0],arr_points[i][1]);  
                context.lineTo(arr_points[i][2],arr_points[i][3]);
                context.stroke();
                context.closePath();
            }
        })
    </script>
    <body onload="init()">
        <div><img src="sample.jpg" height="400" width="400" style="position:absolute;" /></div>
        <canvas id="c" width="400" height="400" style="position:absolute;border:2px solid;"></canvas>
    </body>
</html>

Upvotes: 0

Views: 98

Answers (1)

Mayank
Mayank

Reputation: 259

I debugged your code and found that your canvas._object still have the deleted line. So, I changed your code a bit, try this and let me know if this works.

<html>
<script type="text/javascript" src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $("#can").mousemove(function(e){handleMouseMove(e);});
    })
</script>
<script type="text/javascript">
  var arr_points = new Array();
  var canvas;
  var isDown;
  function init() {
      canvas = new fabric.Canvas('c', {
        selection: false
      });

    canvas.on('mouse:down', function(o) {
      isDown = true;
      var pointer = canvas.getPointer(o.e);
      // console.log(pointer)
      start_point_x = pointer.x;
      start_point_y = pointer.y;
      var points = [pointer.x, pointer.y, pointer.x, pointer.y];
      line = new fabric.Line(points, {
        strokeWidth: 2,
        fill: 'red',
        stroke: 'red',
        originX: 'center',
        originY: 'center'
      });
      canvas.add(line);
    });

    canvas.on('mouse:move', function(o) {
      if (!isDown) return;
      var pointer = canvas.getPointer(o.e);
      line.set({
        x2: pointer.x,
        y2: pointer.y
      });
      canvas.renderAll();
    });

    canvas.on('mouse:up', function(o) {
        var pointer = canvas.getPointer(o.e);
        var point_x = pointer.x;
        var point_y = pointer.y;
        arr_points.push([start_point_x,start_point_y,point_x,point_y]); 
        $(".canvas-container").append("<a class='remove_line' array_index='"+canvas._objects.length+"' start_point_x='"+start_point_x+"' start_point_y='"+start_point_y+"' end_point_x='"+point_x+"' end_point_y='"+point_y+"' href='#'><span style='position:absolute; left:"+(point_x + 10)+"px; top:"+(point_y - 7)+"px;'>X</span></a>")
      isDown = false;
    });

    $(document).on('click','.remove_line',function(){
        var len = arr_points.length;
        var start_x = $(this).attr("start_point_x");
        var start_y = $(this).attr("start_point_y");
        var end_x = $(this).attr("end_point_x");
        var end_y = $(this).attr("end_point_y");
        for(i=0; i<len; i++){
            if(start_x == arr_points[i][0] && start_y == arr_points[i][1] && end_x == arr_points[i][2] && end_y == arr_points[i][3]){
                var temp_index = i;
            }
        }
        arr_points.splice(temp_index, 1);
        $(this).remove();
        var canvasT=document.getElementById("c");
        var context=canvasT.getContext("2d");
        context.canvas.width = context.canvas.width;
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        var newlen = arr_points.length;
        for(i=0; i<newlen; i++){
            context.beginPath();
            context.strokeStyle ='red';
            context.lineWidth = 2;
            context.moveTo(arr_points[i][0],arr_points[i][1]);  
            context.lineTo(arr_points[i][2],arr_points[i][3]);
            context.stroke();
            context.closePath();
        }
        var array_index = -1;
        for(var i=0; i< canvas._objects.length; i++){
          if(canvas._objects[i].x1 == start_x && canvas._objects[i].x2 == end_x && canvas._objects[i].y1 == start_y && canvas._objects[i].y2 == end_y){
              array_index = i;
          }

        }
        canvas._objects.splice(array_index, 1)

  })   
  }







</script>
<body onload="init()">
    <div><img src="sample.jpg" height="400" width="400" style="position:absolute;" /></div>
    <canvas id="c" width="400" height="400" style="position:absolute;border:2px solid;"></canvas>
</body>
</html>

Upvotes: 1

Related Questions