Canvas deletes it's self after resizing HTML5/JavaScript-CodePudding

I made canvas that you can draw on it. And it's also responsive to screen size. But if I resize the browser even with one pixel... Canvas clears it's self. Is there any way to prevent this? Fot the heads up, in my code you'll see code that prevents user from scrolling while he/she is on canvas(drawing). You'll also see code for mobile devices(to make possible for mobile users to draw on canvas). But "scroll prevent" isn't working on IOS devices for some reason.

#pen {
    background-color: rgba(0, 0, 0, .2);
}

#paper {
    display: grid;
    column-count: 1;
}

#canvasORG {
    width: 97.5vw;
    height: 90vh;
    cursor: url("data:image/svg xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✍️</text></svg>") 5 27, auto;
}

#colors {
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#black {
    width: 30px;
    height: 30px;
    background: black;
}

#black:hover {
    background: rgba(0, 0, 0, .1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" type="image/icon" href="images/IYN_logo.png" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

<body>

        <div id="paper">
            <div id="canvasORG">
                <canvas id="canvas" style="background-color: white; border:2px solid;"></canvas>
            </div>
            <div id="colors">
                &emsp;
                <div id="black" onclick="color(this)"></div>&nbsp;
                &emsp;
                <button id="pen" style="height: 50px; font-size: 25px; padding-bottom: 5px;">✍