HTML Canvas Clears and Reappears

I have a html canvas that I draw a rect on, when I clear the canvas the screen clears but when you move the mouse the rect reappears. I stretch the rect vertically. Here is a code pen example of what is happening, you have to double click on the canvas for the rect to appear. https://codepen.io/tjquinn/pen/BYZQqo

HTML

<div id="app">
  <div class="cv">
    <canvas  v-on:mousedown="mouseDown" v-on:mousemove="mouseMove" v-on:mouseup="mouseUp" @dblclick="dclick" id="rect" class="rect"  width="150" height="700"></canvas>
    <button v-on:click="clear">
      Clear
    </button>
  </div>
</div>

JS

methods: {
       checkCloseEnough: function (p1, p2) {
            return Math.abs(p1 - p2) < this.closeEnough;
        },
        getVal: function (x) {
            this.canvas2 = document.getElementById('rect');
            this.ctx2 = this.canvas2.getContext('2d');
            this.st = this.canvas2.height;
            this.ic = (this.st / x);           
        },
        draw: function () {
                this.ctx2.fillStyle = "#222222";
                this.ctx2.fillRect(this.ctx2.rect.startX, this.ctx2.rect.startY, this.ctx2.rect.w, this.ctx2.rect.h);
                this.drawHandles();

        },
        drawHandles: function () {
            this.drawCircle(this.ctx2.rect.startX + this.ctx2.rect.w/2, this.ctx2.rect.startY, this.closeEnough); //top left corner
            //drawCircle(rect.startX + rect.w, rect.startY, closeEnough);
            //drawCircle(rect.startX + rect.w, rect.startY + rect.h, closeEnough);
            this.drawCircle(this.ctx2.rect.startX + this.ctx2.rect.w/2, this.ctx2.rect.startY + this.ctx2.rect.h, this.closeEnough);
        },
        drawCircle: function (x, y, radius) {
            this.ctx2.fillStyle = "#FF0000";
            this.ctx2.beginPath();
            this.ctx2.arc(x, y, radius, 0, 2 * Math.PI);
            this.ctx2.closePath();
            this.ctx2.fill();

        },
        checkCloseEnough: function (p1, p2) {
            return Math.abs(p1 - p2) < this.closeEnough;
        },
        mouseDown: function (event) {

            this.mouseX = event.pageX - this.canvas2.offsetLeft;
            this.mouseY = event.pageY - this.canvas2.offsetTop;
              // if there isn't a rect yet
            if (this.ctx2.rect.w === undefined) {
                this.ctx2.rect.startX = this.mouseY;
                this.ctx2.rect.startY = this.mouseX;
                this.dragBR = true;
            }
            if (this.checkCloseEnough(this.mouseX, this.ctx2.rect.startX + this.ctx2.rect.w/2) && this.checkCloseEnough(this.mouseY, this.ctx2.rect.startY)) {
                this.dragTL = true;

            }
            else if (this.checkCloseEnough(this.mouseX, this.ctx2.rect.startX + this.ctx2.rect.w/2) && this.checkCloseEnough(this.mouseY, this.ctx2.rect.startY + this.ctx2.rect.h)) {
                this.dragBR = true;

            }
            else {
                // handle not resizing
            }



            this.ctx2.clearRect(0, 0, this.canvas2.width, this.canvas2.height);
            this.draw();

        },
        mouseMove: function (event) {
            this.mouseX = event.pageX - this.canvas2.offsetLeft;
            this.mouseY = event.pageY - this.canvas2.offsetTop;
            if (this.dragTL) {
                //rect.w += rect.startX - mouseX;
                this.ctx2.rect.h += this.ctx2.rect.startY - this.mouseY;
                //rect.startX = mouseX;
                this.ctx2.rect.startY = this.mouseY;
            }
            else if (this.dragBR) {
                //rect.w = Math.abs(rect.startX - mouseX);
                this.ctx2.rect.h = Math.abs(this.ctx2.rect.startY - this.mouseY);
            }
            this.ctx2.clearRect(0, 0, this.canvas2.width, this.canvas2.height);
            this.draw();
        },
        mouseUp: function () {
            this.dragTL = false;
            this.dragTR = false;
            this.dragBL = false; 
            this.dragBR = false;
        },

        dclick: function (e) {
            console.log("Fires");

            e.preventDefault();
            this.ctx2.rect = {
                startX: 25,
                startY: 100,
                w: (this.canvas2.width - 50),
                h: 300,
            }
            this.draw();

            this. ln = this.lines;
            this.getVal(10);
        },

        clear: function () {
            this.cv2 = 'rect';
            this.canvas2 = document.getElementById(this.cv2);
            this.ctx2 = this.canvas2.getContext('2d');
           console.log(this.ctx2.clearRect(0, 0, this.canvas2.width, this.canvas2.height));
            console.log("Clear should run");
        },
    }

  })

1 answer

  • answered 2018-02-13 00:16 Taylor

    It turns out the error was in my logic that was pointed out by Kamal Singh, I needed to add clear flags to my methods so that they do not run if the screen has been cleared.

    <html>
        <head>
            <title>Test</title>
            <script src="vue.min.js"></script>
        </head>
        <body>
            <div id="app">
    
                <div class="cv">
                    <canvas style='border:1px solid;'  v-on:mousedown="mouseDown" v-on:mousemove="mouseMove" v-on:mouseup="mouseUp" @dblclick="dclick" id="rect" class="rect"  width="150" height="700"></canvas>
                    <button v-on:click="clear">
                Clear
                </button>
                </div>
            </div>
            <script>
             new Vue({
              el: '#app',
              data: function() {
                    return {
    
                        rect : {},
                        drag : false,
                      closeEnough : 10,
                        st : 0,
                        ic : 0,
                        mouseX : 0,
                        mouseY : 0,
                        dragTL : false,
                        dragBL : false,
                        dragTR : false,
                        dragBR : false,
                        cv2: '',
                        ln: 0,
                    cleared: true
                    }
                },
                mounted: function () {
                    this.getVal(10);
                    this.draw();
                },                
                methods: {
                   checkCloseEnough: function (p1, p2) {
                        return Math.abs(p1 - p2) < this.closeEnough;
                    },
                    getVal: function (x) {
                        this.canvas2 = document.getElementById('rect');
                        this.ctx2 = this.canvas2.getContext('2d');
                        this.st = this.canvas2.height;
                        this.ic = (this.st / x);           
                    },
                    draw: function () {
                            this.ctx2.fillStyle = "#222222";
                            this.ctx2.fillRect(this.ctx2.rect.startX, this.ctx2.rect.startY, this.ctx2.rect.w, this.ctx2.rect.h);
                            this.drawHandles();
    
                    },
                    drawHandles: function () {
                        this.drawCircle(this.ctx2.rect.startX + this.ctx2.rect.w/2, this.ctx2.rect.startY, this.closeEnough); //top left corner
                        //drawCircle(rect.startX + rect.w, rect.startY, closeEnough);
                        //drawCircle(rect.startX + rect.w, rect.startY + rect.h, closeEnough);
                        this.drawCircle(this.ctx2.rect.startX + this.ctx2.rect.w/2, this.ctx2.rect.startY + this.ctx2.rect.h, this.closeEnough);
                    },
                    drawCircle: function (x, y, radius) {
                        this.ctx2.fillStyle = "#FF0000";
                        this.ctx2.beginPath();
                        this.ctx2.arc(x, y, radius, 0, 2 * Math.PI);
                        this.ctx2.closePath();
                        this.ctx2.fill();
    
                    },
                    checkCloseEnough: function (p1, p2) {
                        return Math.abs(p1 - p2) < this.closeEnough;
                    },
                    mouseDown: function (event) {
                        if(this.cleared) return;
                        this.mouseX = event.pageX - this.canvas2.offsetLeft;
                        this.mouseY = event.pageY - this.canvas2.offsetTop;
                          // if there isn't a rect yet
                        if (this.ctx2.rect.w === undefined) {
                            this.ctx2.rect.startX = this.mouseY;
                            this.ctx2.rect.startY = this.mouseX;
                            this.dragBR = true;
                        }
                        if (this.checkCloseEnough(this.mouseX, this.ctx2.rect.startX + this.ctx2.rect.w/2) && this.checkCloseEnough(this.mouseY, this.ctx2.rect.startY)) {
                            this.dragTL = true;
    
                        }
                        else if (this.checkCloseEnough(this.mouseX, this.ctx2.rect.startX + this.ctx2.rect.w/2) && this.checkCloseEnough(this.mouseY, this.ctx2.rect.startY + this.ctx2.rect.h)) {
                            this.dragBR = true;
    
                        }
                        else {
                            // handle not resizing
                        }