Zoomable canvas picture without movement in the page

bdchapril.css

@@ -249,6 +249,7 @@ text-decoration: underline;
 {
   background-color:white;
   position: fixed;
+  display: none;
 
 }
 #newWidth, #newHeight{

index.html

@@ -14,7 +14,7 @@
 
         <!-- ajout conteneur global -->
         <div id="wrapper">
-            <div id="focusImg" style="display:none;"><img id="bigImg" />
+            <div id="focusImg"><img id="bigImg" />
             </div>
             <!-- tableau de bord -->
 
@@ -25,19 +25,16 @@
                     <p class="hidden">Générateur de BD de l'April</p>
                     <div id="lib" class="rc">
                         <div><label for="newText"><span class="hidden">Saisissez votre bulle</span></label> <input
-                                type="text" id="newText" placeholder="Saisissez votre bulle"
-                                onkeypress="cg.createTextFromInput(event)" /></div>
+                                type="text" id="newText" placeholder="Saisissez votre bulle"/></div>
                         <div class="upload">
-                            <input type="file" accept="image/*" id="imageFileInput" class="file" multiple
-                                onchange='cg.createImageFromInput(this)' />
-                            <h2 class="save"><a href="#" onclick="$('#imageFileInput').click();"
-                                    title="Importer une ou plusieurs images">Importer une image</a></h2>
+                            <input type="file" accept="image/*" id="imageFileInput" class="file" multiple/>
+                            <h2 class="save"><a id="uploadSave" href="#" title="Importer une ou plusieurs images">Importer une image</a></h2>
                         </div>
                     </div>
                 </div>
 
                 <div id="hiddenObjs">
-                    <div id="textTool" class="rc mini textTool" title="Ajouter du texte" onclick="cg.createText();">T</div>
+                    <div id="textTool" class="rc mini textTool" title="Ajouter du texte">T</div>
                     <div id="instructs" class="rc instructions">
                         <h2>Instructions</h2>
                         <ul>
@@ -51,21 +48,20 @@
                 </div>
                 <div id="toolbar" class="rcBottom">
 
-                    <h2 class="save"><a href="javascript:cg.saveImage();" title="enregistrer l image">Enregistrer votre
+                    <h2 class="save"><a id="toolbarImageSave" href="#" title="Enregistrer l’image">Enregistrer votre
                             image</a></h2>
                     <h2 class="last">Redimensionner la fenêtre</h2>
                     <br />
                     <p> <input type="text" id="newWidth" placeholder="Largeur" /> x <input type="text" id="newHeight"
                             placeholder="Hauteur" /> </p>
                     <br />
-                    <h2 class="save"><a href="javascript:cg.setScreen($('#newWidth').val(), $('#newHeight').val())"
-                            class="save">Redimensionner</a> </h2>
+                    <h2 class="save"><a id="resizeCanvas" href="#" class="save">Redimensionner</a> </h2>
                 </div>
             </div>
             <!-- fin tableau de bord -->
 
             <div id="cscreen">
-                <canvas class="rc" id="c" crossorigin="anonymous" width="800" height="600">
+                <canvas class="rc" id="c" crossorigin="anonymous" width="800" height="600" tabindex=0>
                     Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.
                 </canvas>
             </div>
@@ -75,7 +71,7 @@
                         <em>BD Chapril</em> est une adaptation de <a href="https://framalab.org/gknd-creator/">GéGé</a>,
                         lui-même une adaptation de <a href="https://github.com/willianpc/comicgen"
                             title="Code source de l'auteur original sur Github">Comic Gen de Willian Carvalho</a> réalisée
-                        par Cyrille Largillier pour <a href="https://framasoft.org"
+                        par Cyrille Largillier pour <a href="https://framasoft.org/"
                             title="Vous ne connaissez pas encore Framasoft ?">Framasoft</a>.</p>
             </footer>
             <script type="module" src="bdchapril.js" async="true"></script>

lib/comicgen.js

@@ -31,9 +31,9 @@ cg.clearScreen = function(){
     scene.update();
 }
 
-$(d).keyup(function(e){
+$(d).on('keyup', function(e){
 
-    var key = e.keyCode || e.which;
+    var key = e.which;
 
     if(key == 46 && currentObj){
         scene.remove(currentObj);
@@ -47,9 +47,9 @@ $(d).keyup(function(e){
     }
 });
 
-$(d).keydown(function(event){
-
-    var key = event.keyCode || event.which;
+canvas.on('focusin').on('keydown', function(event){
+    event.preventDefault();
+    var key = event.which;
 
     if(key == 38 && currentObj){
         cg.zoomIn(currentObj);
@@ -60,13 +60,14 @@ $(d).keydown(function(event){
     }
 });
 
-d.onmousewheel = function(mw){
-    if(currentObj && mw.wheelDelta > 0){
+d.addEventListener('wheel', function(event) {
+    event.preventDefault();
+    if(currentObj && event.deltaY > 0){
         cg.zoomIn(currentObj);
-    } else if (currentObj && mw.wheelDelta < 0){
+    } else if (currentObj && event.deltaY < 0){
         cg.zoomOut(currentObj);
     }
-};
+}, { passive: false });
 
 cg.hoverdiv = function(e,divid){
     var x = e.clientX + 25;
@@ -273,3 +274,25 @@ cg.setScreen = function(w, h){
         }
     }
 }
+
+$('#newText').on('keyup', cg.createTextFromInput);
+
+$('#imageFileInput').on('change', function() {
+    cg.createImageFromInput(this);
+});
+
+$('#uploadSave').on('click', function() {
+    $('#imageFileInput').click();
+});
+
+$('#textTool').on('click', function() {
+    cg.createText();
+});
+
+$('#toolbarImageSave').on('click', function() {
+    cg.saveImage();
+});
+
+$('#resizeCanvas').on('click', function() {
+    cg.setScreen($('#newWidth').val(), $('#newHeight').val());
+});