How to Clear the Canvas For Redrawing

How to clear the canvas for redrawing

Given that canvas is a canvas element or an OffscreenCanvas object,

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

Javascript Canvas clear/ redraw

You need to add a beginPath() in there. rect() will accumulate rectangles to the path, clearRect() won't clear those. Also reset comp. mode and alpha as they are sticky.

You could avoid beginPath() if you use fillRect() instead of rect() + fill() (added example below) as fillRect() does not add to the path.

function fill(imgSection,currentcolor){

    // these should really be initialized outside the loop    
    canvas = document.getElementById(imgSection);
    ctx = canvas.getContext("2d");

    // clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // clear path
    ctx.beginPath();

    // use default comp. mode
    ctx.globalCompositeOperation = "source-over";

    // reset alpha
    ctx.globalAlpha = 1;

    ctx.drawImage(imgToBeFilled, 0, 0);
    ctx.globalCompositeOperation = "source-atop";

    if (isItColorOrPattern === "color"){

        // rect() accumulates on path
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = getColor(currentcolor);
        ctx.fill();

       // instead of rect() + fill() you could have used:
       // fillRect() does not accumulate on path
       // fillRect(0, 0, canvas.width, canvas.height);
    }
    else {
        var pattern = ctx.createPattern(imgFill, 'repeat');
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = pattern;
        ctx.fill();
    }

    ctx.globalAlpha = .1;
    ctx.drawImage(imgToBeFilled, 0, 0);
    ctx.drawImage(imgToBeFilled, 0, 0);
    ctx.drawImage(imgToBeFilled, 0, 0);

    oldcolor = currentcolor;
    oldxImgToBeFilled = xImgToBeFilled;    
}

How to clear canvas html5?

According to this HTML5 Canvas Tutorial:
http://www.html5canvastutorials.com/advanced/html5-clear-canvas/

You do not have to call beginPath(). Next to this, you should probably change context to canvas.

$("#clear").on('click', function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
});

Example:
http://jsfiddle.net/cwv0y6nh/

When to clear a canvas when redrawing images

Every time you draw something on the canvas it overrides the current information in that location -> one canvas will never have multiple 'layers' on it.

Eg. you have to call clearRect, which essentially writes new data to the canvas, to 'clear' the canvas

How do you clear canvases in javascript?

It seems that Javascript doesn't like the function name you're using - clear() - thus the function won't ever be called. Try renaming the function to clearIt() or something like that. Apart from that your code for cleaning the canvases is correct.

Clear canvas by JavaScript

This plugin stores all the drawing commands in an actions array, and at each redraw it will go through that whole list and draw the full thing again. (Which allows to avoid having holes in your stroke).

The docs are very hard to grasp, but you can set this options's content through the .sketch("options", value) method.

As hinted in this issue, setting it to an empty Array will thus remove all the previous commands. All you have to do then is to redraw the whole scene, now empty:

const $canvas = $('#canvasFirst');
$canvas.sketch();
$('button').on("click", (evt) => {
  $canvas.sketch("actions", []);
  $canvas.sketch("redraw");
});

canvas { border: 1px solid; vertical-align: top }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script>
<p>Draw on the below canvas, then press "clear" and try to draw again.</p>

<canvas id="canvasFirst">
</canvas>
<button>clear</button>

ctx.restore();

ctx.clearRect(0, 0, canvas.width, canvas.height);