Simple technique for clearing a sketch and keeping it cleared?

[cannikin]

Dude I'm loving this library, it's SO GOOD.

I was hoping there was an easy technique for clearing a sketch and keeping it cleared when you start drawing? I've tried both of these:

canvas.getContext('2d').clearRect(0,0,width,height);

canvas.width = canvas.width;

They both clear the sketch initially, but as soon as you start drawing again your original sketch reappears!

Of course what would be really awesome would be adding a data-clear="true" attribute to any random element. :)

[cannikin]

I think I got it!

canvas.getContext('2d').clearRect(0,0,width,height);
canvas.sketch('actions',[]);

It looks like the actions were being replayed back onto the screen again during a redraw. So clearing those out meant there was nothing to replay. :)

[r-follador]

I'm not sure if this is still an open question, but I changed the script as follows:

I added this to this.options.tool.links:

if ($(this).attr('data-clear')) {
            sketch.clear();
}

And this function just below the Sketch.prototype.download function:

Sketch.prototype.clear = function() {
      this.actions = [];
      return this.redraw();
};

I can call a reset as follows:

<a href='#simple_sketch' data-clear='true'>Clear</a>

Maybe the original author wants to integrate this into a new release?

[isaacsf]

@Furstenwald simply amazing! It works like a charm (iPad too).

Thanks!

Isaac

[JoseTomasTocino]

Kudos from here as well @Furstenwald it works flawlessly.

[Deleted user]

@Furstenwald It works fine in PC, android mobile but in iOS, it don't clear all drawing. it clears past drawing only. Anyway, thanks for your help!

[pmaoui]

Hi,
any idea why this great feature is still not merged ?

[dkzeb]

I can also confirm that on iOS the sketch is not cleared - last string drawn will get redrawn. This is an iOS only issue and i think its to do with how we clear the "actions" array - i will investigate further and post if i find a solution.

[Humantools]

@dkzeb: The sketch is not cleared on touch devices. Try sketch("stopPainting") at first to cancel the last touchstart event.

[dkzeb]

@Humantools - no i found out :) - what i did was a little hack to stop the touch from being registered - cant remember the exact code but basically i added another if statement to catch if we ended touch and the stopped the drawing from there. It works very well now :)

[dkzeb]

@Humantools and thx btw - totally forgot to come back here and write what i did :)

[greatelv]

it works fine.

skts.sketch().action = null;
skts.sketch().actions = [];
canvO.clearRect(0, 0, canvs.width, canvs.height);

[JensWolff]

If anyone is still searching for a working code to clear the sketch-canvas by click on any html-element with the ID "myClearButton" :

$("#myClearButton").click(function(){
 var canvas = document.getElementById('sketchCanvas');  
 canvas.getContext('2d').clearRect(0,0,1920,2000);
 $('#sketchCanvas').sketch('actions',[]);
});

[JMarson]

@JensWolff - Thanks, I tried yours, which worked across web and Android browser, but the iOS browser didn't function correctly, it retained the very last action, requiring the extra line from @wjswjs2 - to null the 'action' variable as well. Thanks to you both for the assistance!

[jkrassman]

Add this instead, and you have a fix for iOS :D

Sketch.prototype.clear = function() {

      this.actions = null;
      this.actions = [];
      this.painting = false;

      return this.redraw();

    };

[rkeet]

I solved clearing the canvas with the following. Solution takes into account that the background of the canvas might be an image.

Added a clear button in the HTML:

<a href="#colors_sketch" id="clearButton" style="float: right;" data-image="<?= '/file-path' ?>">Eraser</a>

Added inline script as per the example on http://intridea.github.io/sketch.js/ before the $('#colors_sketch').sketch();

 <script type="text/javascript">
//Script of $.each([colors], func() etc
//Script of $.each([sizes], func() etc

<?php if ($image) : ?>
    var canvas = document.getElementById('colors_sketch'),
        context = canvas.getContext('2d'),
        base_image = new Image();

    base_image.src = "<?= '/file-path' ?>";
    base_image.onload = function () {
        context.drawImage(
            base_image,
            0,
            0,
            canvas.offsetWidth,
            canvas.offsetHeight
        );
    };
<?php endif ?>

$('#colors_sketch').sketch();
</script>

I added this to the if (this.options.toolLinks) check on line 49, just before the return false.

if ($(this).is('#clearButton')) {
    sketch.clearCanvas($(this).data('image'));
}

Then extended the Sketch object with the following function.

Sketch.prototype.clearCanvas = function(image) {
    var canvas = document.getElementById(this.canvas.attr('id')),
        context = canvas.getContext('2d');

    context.clearRect(
            0,
            0,
            canvas.offsetWidth,
            canvas.offsetHeight
        );

    if (image) {
        base_image = new Image();
        base_image.src = image;
        base_image.onload = function () {
            context.drawImage(
                base_image,
                0,
                0,
                canvas.offsetWidth,
                canvas.offsetHeight
            );
        };
    }

    this.actions = [];

    return this.redraw();
};

[sferoze]

@NukeFace I have used your code above but when I start drawing on top of the background image it disappears. Any advice?

[rkeet]

@sferoze Has been a while since I've used the code above. However, looking at it again, it does not look like my snippet triggers anything automatically. The clearCanvas() prototype function must be called/triggered and the JS in within the PHP tags adds some code to add the image to the background.

If you have the problem that the image disappears when you start drawing, you might have a trigger on your code somewhere that triggers either the redraw() or sketch() functions.

[sferoze]

@NukeFace

Check out the code below. It is the redraw function. It is called when you are drawing with the market on the canvas. Notice the line that is commented out this.el.width = this.canvas.width();. When that line is commented out the background image stays, but then the drawing line look a little fatter and has jagged edges. It's just not as smooth. So it seems like I need that line of code. But if I leave it in, then the background image disappears. Any idea what's going on?

Sketch.prototype.redraw = function() {
      var sketch;
      // When line below commented out the background image stays... but the drawing line becomes jagged and not smooth like before. Why?
      // this.el.width = this.canvas.width(); 
      this.context = this.el.getContext('2d');
      sketch = this;
      $.each(this.actions, function() {
        if (this.tool) {
          return $.sketch.tools[this.tool].draw.call(sketch, this);
        }
      });
      if (this.painting && this.action) {
        return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
      }
    };