CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvas
Khyana
Khyana

Reputation: 195

HTML5 Canvas erase lines

I'm not familiar with jquery and canvas, I would like to make an eraser (like the eraser tool in photoshops or paint) , erases some lines in my canvas.

Marker - triggers to start draw
Reset - clears the canvas Eraser - erases unnecessary lines/sketch (What i would like to do)

Here's the code so far I got using different sources, I would like to include ERASER

$(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
    
      $('#colors_demo').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 30px;height: 30px;display:inline-block; background: " + this + ";'></a> ");
    });
    $('#colors_sketch').sketch();
    $('#colors_sketch').sketch({defaultColor: "#ff0"});
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<div id="colors_demo" class="tools">
  
</div>
<div class="tools">
  <a href="#colors_sketch" data-tool="marker">Marker</a>
  <a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>

I was having difficulty to search online since it just shows reset or undo Hope somebody can help me out. THANK YOU SO MUCH!!!!

Upvotes: 0

Views: 769

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

Why dont you get around and use the background color as an eraser tool

Below a sample sniipet :

$(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
    
      $('#colors_demo').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 30px;height: 30px;display:inline-block; background: " + this + ";'></a> ");
    });
    var color = getBackground($('#colors_sketch'));
    //console.log(color);
    $("#eraser").attr('data-color',color);
    $('#colors_sketch').sketch();
    $('#colors_sketch').sketch({defaultColor: "#ff0"});
});

function getBackground(jqueryElement) {
  var color = jqueryElement.css("backgroundColor");
  if(color == "transparent"){
    color = jqueryElement.parent().css("backgroundColor") == "transparent" ? "#fff" : jqueryElement.parent().css("backgroundColor");
    //alert(color)
  }
  return hexc(color);
}

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');

    return color;
}
#colors_sketch {
  border:1px solid black;
  background-color:#999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<div id="colors_demo" class="tools">
  
</div>
<div class="tools">
  <a href="#colors_sketch" data-tool="marker">Marker</a>
  <a id="eraser" href='#colors_sketch' data-color=''>Eraser</a>
  <a href="#colors_sketch" data-tool="eraser">Clear</a>
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>

Upvotes: 1

Related Questions