javascript - Unable to clear canvas - Stack Overflow

admin管理员组

文章数量:1336083

I am having a really difficult time resetting / clearning the contents of my canvas. I am currently using the : Sketch.js plugin to generate a free form canvas. It does exactly what I need it to, however, it does not seem to have an simple canvas 'reset' function call to clear the contents.

jsfiddle: /

NOTE: I read that the 'width' method does not work in chrome, and both methods don't seem to work on a 'free-form' canvas, but only on shapes, which I did not test.

This is what I tried so far:

Markup

<div class="signature-field">
            Signature:
    <span class="sketch-container">
            <canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="150"></canvas>
            <span class="save-signature">Save Signature</span>
            <span class="reset-canvas">Reset Canvas</span>
    </span>
    Date: <input type="text"><br/><br/>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text">
</div>

JQuery (My latest attempt)

$('.reset-canvas').click(function() {
        var myCanvas = document.getElementById("#simple_sketch");
        var width = myCanvas.width;
        myCanvas.width = width + 1;

 });

Method 2:

  $('.reset-canvas').click(function() {
           canvas.width = canvas.width; 
   });

Method 3:

$('.reset-canvas').click(function() {
       var myCanvas = document.getElementById("simple_sketch");
       var ctx = myCanvas.getContext('2d');
       ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
 });

I am having a really difficult time resetting / clearning the contents of my canvas. I am currently using the : Sketch.js plugin to generate a free form canvas. It does exactly what I need it to, however, it does not seem to have an simple canvas 'reset' function call to clear the contents.

jsfiddle: http://jsfiddle/k7fmq/

NOTE: I read that the 'width' method does not work in chrome, and both methods don't seem to work on a 'free-form' canvas, but only on shapes, which I did not test.

This is what I tried so far:

Markup

<div class="signature-field">
            Signature:
    <span class="sketch-container">
            <canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="150"></canvas>
            <span class="save-signature">Save Signature</span>
            <span class="reset-canvas">Reset Canvas</span>
    </span>
    Date: <input type="text"><br/><br/>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text">
</div>

JQuery (My latest attempt)

$('.reset-canvas').click(function() {
        var myCanvas = document.getElementById("#simple_sketch");
        var width = myCanvas.width;
        myCanvas.width = width + 1;

 });

Method 2:

  $('.reset-canvas').click(function() {
           canvas.width = canvas.width; 
   });

Method 3:

$('.reset-canvas').click(function() {
       var myCanvas = document.getElementById("simple_sketch");
       var ctx = myCanvas.getContext('2d');
       ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
 });

• javascript
• jquery
• html
• canvas
• html5-canvas

Share Improve this question Follow edited Dec 10, 2012 at 19:21 AnchovyLegend asked Dec 10, 2012 at 16:52 AnchovyLegendAnchovyLegend 12.5k4141 gold badges152152 silver badges240240 bronze badges 7

• Maybe this will help? stackoverflow./questions/9701380/… – Barrie Reader Commented Dec 10, 2012 at 17:00
• Where's the code that draws this image? – Shmiddty Commented Dec 10, 2012 at 18:40
• It is drawn by the user using a free-form brush, it will be different every time. The code that actually handles this free-form brush capability is here: intridea.github./sketch.js/lib/sketch.js – AnchovyLegend Commented Dec 10, 2012 at 18:41
• Can you set up a working fiddle demonstrating your problem? – Shmiddty Commented Dec 10, 2012 at 18:46
• What are the values of x, y, w, h and context in method 3? context.clearRect (0, 0, canvas.width, canvas.height) should work, as long as the appropriate context and canvas are within the function's scope. – Stuart Commented Dec 10, 2012 at 18:57

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 7

Try this: http://jsfiddle/k7fmq/1/

The sketchpad plugin keeps an array of "actions", and redraws them each update (which seems unnecessary, really, but whatevs).

var sktch = $('#simple_sketch').sketch();  // store a reference to the element.
var cleanCanvas = $('#simple_sketch')[0];

$('.save-signature').click(function(){
    /* replace canvas with image */
    var canvas = document.getElementById("simple_sketch");
    var img    = canvas.toDataURL("image/png");
    $('#simple_sketch').replaceWith('<img src="'+img+'"/>');
    $('.signature-buttons').replaceWith('');
});
$('.reset-canvas').click(function(){
    sktch.sketch().actions = [];       // this line empties the actions. 
    var myCanvas = document.getElementById("simple_sketch");
    var ctx = myCanvas.getContext('2d');

    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});

Try this:

var ctx = myCanvas.getContext('2d');
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.restore();

本文标签： javascriptUnable to clear canvasStack Overflow