CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
sam
sam

Reputation: 33

Canvas Clear not working properly

Hello I currently am having some issues with my website application,

I have got the canvas to clear, but when I go to clear it it clears! which is great but when i go to draw again it doesn't give me a smooth line.

clear.js

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var CleanBtn = document.getElementById('clear');

var CleanCanvas = function(){
    context.fillStyle = 'white';
    context.fillRect(0,0, window.innerWidth, window.innerWidth);
}

CleanBtn.addEventListener('click', CleanCanvas);

my website is www.drawthelot.com

Upvotes: 0

Views: 1188

Answers (2)

user3314287
user3314287

Reputation:

That's because you changed the context.fillStyle, for that reason you are drawing using the white color, if you click again the black color on the botton right of your UI everything returns normal.
You can fix the problem like this:

var CleanCanvas = function(){
   var lastColor = context.fillStyle;
   context.fillStyle = 'white';
   context.fillRect(0,0, window.innerWidth, window.innerWidth);
   context.fillStyle = lastColor;
}


But I recommend you to use the default context.clearRect method for wiping the content, this method also resets the opacity to 0.

var CleanCanvas = function(){
   context.clearRect(0,0, canvas.width, canvas.height);
}

Upvotes: 1

Suman Bogati
Suman Bogati

Reputation: 6349

Use context.clearRect to clear the canvas, something like

context.clearRect(0,0, window.innerWidth, window.innerWidth);

DEMO

Upvotes: 1

Related Questions