Canvas button losing quality and not working

Question

I created button in canvas, but its not working when i test it in fullscreen the button is pixeled and not working. Somebody help me pls. Here is a picture. Problem. And when i click the button nothing happened. But when im exiting from fullscreen and click the button its working, and has good quality. This is my code HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js</script>
<p><a href="javascript:fullscreen();">Go Fullscreen</a></p>
<canvas id="canvas" width="800" height="500"
    style="background: #FFFFFF; border: 5px solid black;" role="img">
        Your browser does not support the canvas element.
</canvas>

JAVASCRIPT

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
canvas.oncontextmenu = function(e) { e.preventDefault(); e.stopPropagation(); }
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var clickedButton;
var buttons=[];
buttons.push(makeButton(3,200,450,100,25,'Three','yellow','gray','black',
    function(){ console.log('You clicked: '+this.id+' with label: '+this.label); },
    function(){ console.log('You released: '+this.id+' with label: '+this.label); }
));

//
drawAll();

//
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mouseup(function(e){handleMouseUpOut(e);});
$("#canvas").mouseout(function(e){handleMouseUpOut(e);});


function makeButton(id,x,y,w,h,label,fill,stroke,labelcolor,clickFn,releaseFn){
    return({
        id:id,
        x:x, y:y, w:w, h:h,
        fill:fill, stroke:stroke, labelcolor:labelcolor,
        label:label,
        click:clickFn,
        release:releaseFn
    });
}

function drawAll(){
    for(var i=0;i<buttons.length;i++){
        drawButton(buttons[i],false);
    }
}

function drawButton(b,isDown){
    ctx.clearRect(b.x-1,b.y-1,b.w+2,b.h+2);
    ctx.fillStyle=b.fill;
    ctx.fillRect(b.x,b.y,b.w,b.h);
    ctx.strokeStyle=b.stroke;
    ctx.strokeRect(b.x,b.y,b.w,b.h);
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.fillStyle=b.labelcolor;
    ctx.fillText(b.label,b.x+b.w/2,b.y+b.h/2);
    if(isDown){
        ctx.beginPath();
        ctx.moveTo(b.x,b.y+b.h);
        ctx.lineTo(b.x,b.y);
        ctx.lineTo(b.x+b.w,b.y);
        ctx.strokeStyle='black';
        ctx.stroke();
    }
}

function findButton(mx,my){
    for(var i=0;i<buttons.length;i++){
        var b=buttons[i];
        if(mx>b.x && mx<b.x+b.w && my>b.y && my<b.y+b.h){
            return(buttons[i]);
        }
    }
    return(null);
}

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // check if a button was clicked under the mouse
  var b=findButton(mouseX,mouseY);
  if(b){
      clickedButton=b;
      drawButton(b,true);
      b.click();
  }
}

function handleMouseUpOut(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // release any clicked button
  if(clickedButton){
      drawButton(clickedButton,false);
      clickedButton.release();
      clickedButton=null;
  }
}

function fullscreen(){
           var el = document.getElementById('canvas');

           if(el.webkitRequestFullScreen) {
               el.webkitRequestFullScreen();
           }
          else {
             el.mozRequestFullScreen();
          }            
}

CSS

body{ background-color: ivory; }
#canvas{border:1px solid red; }

https://jsfiddle.net/barni156/05guymtf/16/

Answer 1

The issue is being seen because when the canvas goes full-screen, it gets stretched to cover the entire screen, but the resolution of the drawing on the canvas does not change.

To change the resolution of the drawing, height and width of the canvas need to be changed on entering/exiting full-screen i.e. :

var canvas = document.getElementById("canvas");
canvas.height = screen.availHeight;
canvas.width = screen.availWidth;

One way of doing this could be setting the canvas width and height to availWidth and availHeight respectively. The following solution does the same.

Working JS Fiddle Link

PS: The solution disturbs the button positioning. Plus, it does not scale individual drawings on the canvas. But that can be easily be handled by scaling all elements with respect to screen width and height.