屏幕尺寸较小（画布）时，无法在整个画布屏幕上绘制

Question

我正在使用HTML画布在网页上绘制形状。当屏幕尺寸正常时，我可以按预期在整个屏幕上绘制。 （请参见附图fullscreen.png）。

  

    

在整个浏览器屏幕上：

  

 但是，当我减小屏幕尺寸时，只能绘制到屏幕的有限部分。 （请参见附图smallscreen.png）

  

    

在移动屏幕上：

  

  

    

我不知道为什么会这样。

         

任何帮助将不胜感激。

  

<div  class="col-11 col-xs-12">
            <div class="canvas-container" id="container">
                    <canvas id="canvas"></canvas>
                    <canvas id="picker" class="fixed-bottom"></canvas>
             </div>

    </div>

let color = "";
let picker = new KellyColorPicker({place : 'picker', input : 'color', size : 200});
let ctx;
let canvas;
let isTouchSupported;
let isPointerSupported;
let isMSPointerSupported;
let isActive = false;
let plots = [];
let sliderSpan;

(function()
{
    //test
    let slider = document.getElementById("slider");
    sliderSpan = slider.getElementsByTagName("span");
    let pickerCanvas = picker.getCanvas();

    let canvasContainer = document.getElementById("container");
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    canvas.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300);
    canvas.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300);
    canvas.style.zIndex = 19;
    canvasContainer.appendChild(pickerCanvas);
    canvasContainer.appendChild(canvas);
    ctx.strokeStyle = picker.getCurColorRgb();
    ctx.lineWidth = '3';
    ctx.lineCap = ctx.lineJoin = 'round';


    isTouchSupported = 'ontouchstart' in window;
    isPointerSupported = navigator.pointerEnabled;
    isMSPointerSupported =  navigator.msPointerEnabled;

    let downEvent = isTouchSupported ? 'touchstart' : (isPointerSupported ? 'pointerdown' : (isMSPointerSupported ? 'MSPointerDown' : 'mousedown'));
    let moveEvent = isTouchSupported ? 'touchmove' : (isPointerSupported ? 'pointermove' : (isMSPointerSupported ? 'MSPointerMove' : 'mousemove'));
    let upEvent = isTouchSupported ? 'touchend' : (isPointerSupported ? 'pointerup' : (isMSPointerSupported ? 'MSPointerUp' : 'mouseup'));

    canvas.addEventListener(downEvent, startDraw, false);
    canvas.addEventListener(moveEvent, draw, false);
    canvas.addEventListener(upEvent, endDraw, false);
})();

function drawOnCanvas(color, plots)
{
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(plots[0].x, plots[0].y);

    for(let i=1; i<plots.length; i++)
    {
        ctx.lineTo(plots[i].x, plots[i].y);
    }
    ctx.stroke();
}

function draw(e)
{
    e.preventDefault(); // prevent continuous touch event process e.g. scrolling!
    if(!isActive) return;

    let x = isTouchSupported ? (e.targetTouches[0].pageX - canvas.offsetLeft) : (e.offsetX || e.layerX - canvas.offsetLeft);
    let y = isTouchSupported ? (e.targetTouches[0].pageY - canvas.offsetTop) : (e.offsetY || e.layerY - canvas.offsetTop);

    plots.push({x: (x << 0), y: (y << 0)}); // round numbers for touch screens
    let packet = CreatePacket();
    packet.pushByte(dataType.drawing);
    packet.pushString(color);
    packet.pushInt(x);
    packet.pushInt(y);
    packet.pushString(OwnerId);
    packet.pushByte(drawType.drawing);
    packet.send();
    drawOnCanvas(color, plots);
}

function startDraw(e)
{
    color = picker.getCurColorHex();
    let size = parseInt(sliderSpan[0].style.left.replace('%',''));
    ctx.lineWidth = size;
    e.preventDefault();
    let x = isTouchSupported ? (e.targetTouches[0].pageX - canvas.offsetLeft) : (e.offsetX || e.layerX - canvas.offsetLeft);
    let y = isTouchSupported ? (e.targetTouches[0].pageY - canvas.offsetTop) : (e.offsetY || e.layerY - canvas.offsetTop);
    let packet = CreatePacket();
    packet.pushByte(dataType.drawing);
    packet.pushString(color);
    packet.pushInt(x);
    packet.pushInt(y);
    packet.pushString(OwnerId);
    packet.pushByte(drawType.start);
    packet.pushByte(size);
    packet.send();
    isActive = true;
}

function endDraw(e)
{
    e.preventDefault();
    isActive = false;
    plots = [];
}