CODEWITHSUNDEEP
javascriptcanvas
keigwin
keigwin

Reputation: 35

Clearing drawing from Canvas permanently

I have a function that clears all drawings off of the background image in canvas when a button is clicked, but when you go to draw again, the old (previously cleared drawings) reappears. How can I make a hard delete so that I can draw again without reloading the page

'use strict';

function initCanvas() {
let bMouseIsDown = false;
let canvas = document.getElementById('cvs');
let ctx = canvas.getContext('2d');
let convert = document.getElementById('convert');
let sel = 'png';
let imgs = document.getElementById('imgs');
let imgW = 300;
let imgH = 200;

let background = new Image();
background.crossOrigin = '';
background.src = "http://i.imgur.com/yf6d9SX.jpg";

background.onload = function(){
     ctx.drawImage(background,0,0,600,400);
}
bind(canvas,ctx,convert,sel,imgs,imgW,imgH,bMouseIsDown);
};

initCanvas()


function bind (canvas,ctx,convert,sel,imgs,imgW,imgH,bMouseIsDown) {
    let iLastX = 0;
    let iLastY = 0;
let iX;
let iY;
    canvas.onmousedown = function(e) {
        bMouseIsDown = true;
        iLastX = e.clientX - canvas.offsetLeft +         (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
        iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
    }
    canvas.onmouseup = function() {
        bMouseIsDown = false;
        iLastX = -1;
        iLastY = -1;
    }
    canvas.onmousemove = function(e) {
        if (bMouseIsDown) {
            iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
            iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
            ctx.moveTo(iLastX, iLastY);
            ctx.lineTo(iX, iY);
            ctx.stroke();
            ctx.strokeStyle = "blue";
            ctx.lineJoin = "round";
            ctx.lineWidth = 5;
            iLastX = iX;
            iLastY = iY;
        }
    };

  document.getElementById('clear').addEventListener('click',      function() {
    rerenderImg();
  });
   function rerenderImg() {
   iY = [];
  iX=[];
  initCanvas()
  }
  };

Upvotes: 0

Views: 148

Answers (2)

Jon
Jon

Reputation: 361

You need to call ctx.beginPath(); before drawing on the canvas again. The logical place to put this is just before your call to ctx.moveTo.

An explanation of why this is needed is given here.

Upvotes: 1

LoganRx
LoganRx

Reputation: 382

You should actually run clearRect on the canvas:

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

Upvotes: 0

Related Questions