azeirah / infinite-canvas Goto Github PK

     const canvas = document.querySelector("canvas");
     let ctx = canvas.getContext("2d");
     setCanvasSize();
    
    // Initialization
    var inf_ctx = infiniteCanvas.initialize(ctx);
    
    inf_ctx.updateChunks();
    
    window.addEventListener('resize', () => {
        setCanvasSize();
        drawUpdate();
    })
    
    let color = '#e28743'
    ctx.strokeStyle = color;
    ctx.lineWidth=1;
    
    // calculate where the canvas is on the window
    // (used to help calculate mouseX/mouseY)
    
    var offsetX=canvas.offsetLeft;
    var offsetY=canvas.offsetTop;
    var scrollX=canvas.scrollLeft;
    var scrollY=canvas.scrollTop;
    
    // this flage is true when the user is dragging the mouse
    var isDown=false;
    
    // these vars will hold the starting mouse position
    var startX;
    var startY;
    
    let objectArray = [];
    let startDrawing = false;
    var width = 0;
    var height = 0;
    
    var dx = 0;
    var dy = 0;
    
    function setCanvasSize()
    {
        canvas.width= window.innerWidth;
        canvas.height = window.innerHeight;
    }
    
    function createNotepaper(x,y,width,height, color)  {
        
        this.color = color;
        this.startX = x;
        this.startY = y;
        this.width = width;
        this.height = height;
    
        this.draw = () => {
            ctx.fillStyle = '#00000020';
            ctx.beginPath();
            ctx.filter = 'blur(3px)';
            ctx.fillRect(this.startX+4,this.startY+4,this.width,this.height);
            ctx.filter = 'blur(0px)';
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.fillRect(this.startX,this.startY,this.width,this.height);
    
            // Text
            ctx.font = "12px Verdana";
            ctx.fillStyle = '#fff';
            ctx.textAlign = "left";
            ctx.fillText("GovBoard Demo", this.startX+5, this.startY+17, this.width-10);
            ctx.save();
        }
        
    }
    
    function changeColor(e)
    {
        
        color = window.getComputedStyle(e).getPropertyValue('background-color');
        ctx.strokeStyle = color;
        isDown=false;
        startDrawing= false;
    }
    
    function handleMouseDown(e){
        e.preventDefault();
        e.stopPropagation();
    
        // save the starting x/y of the rectangle
        startX=parseInt(e.clientX-canvas.offsetLeft);
        startY=parseInt(e.clientY-canvas.offsetTop);
    
        // set a flag indicating the drag has begun
        isDown=true;
    }
    
    function handleMouseUp(e){
      
        e.preventDefault();
        e.stopPropagation();
    
        // the drag is over, clear the dragging flag
        isDown=false;
    
        if(startDrawing)
        {
            
            newPaperNote();
            
        }
        inf_ctx.updateChunks();
        
    }
    
    function handleMouseOut(e){
        e.preventDefault();
        e.stopPropagation();
    
        // the drag is over, clear the dragging flag
        isDown=false;
    }
    
    function drawUpdate()
    {
        
        for(var i=0; i < objectArray.length; i++)
        {
        
            objectArray[i].draw();
           
        }
        
    }
    
    function moveTo(x,y)
    {  
        ctx.clearRect(0,0,canvas.width,canvas.height);
        dx = x;
        dy = y;
        inf_ctx.moveBy(x, y);
      
    }
    
    function newPaperNote()
    {
        
        const notepaper = new createNotepaper(startX,startY,width,height,color);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        objectArray.push(notepaper);
    
        drawUpdate();
        
        startDrawing = false;
    }
    
    function handleMouseMove(e){
        e.preventDefault();
        e.stopPropagation();
       
        // if we're not dragging, just return
        if(isDown)
        {
          
            startDrawing = true;
            // get the current mouse position
            mouseX=parseInt(e.offsetX);
            mouseY=parseInt(e.offsetY);
           
            // calculate the rectangle width/height based
            // on starting vs current mouse position
            width=mouseX-startX;
            height=mouseY-startY;
    
    
            ctx.clearRect(0,0,canvas.width,canvas.height);
           // inf_ctx.updateChunks();
            drawUpdate();        
    
            ctx.beginPath()
            ctx.fillStyle = '#ff0000';
            ctx.rect(startX,startY,width,height);
            ctx.stroke()
           
      
        }
        if(!isDown && startDrawing)
        {
            
           newPaperNote();
    
        }   
        
       
    
    }
    
    
    
    canvas.addEventListener("mousedown",handleMouseDown);
    canvas.addEventListener("mouseup",handleMouseUp);
    canvas.addEventListener("mousemove",handleMouseMove);
    canvas.addEventListener("mouseout", handleMouseOut);