fixed drawing area

js/draw.js

@@ -19,8 +19,6 @@ var area = document.getElementById("draw-area") ;
 var ctx = area.getContext("2d") ;
 var center_img = document.getElementById("tile_center") ;
 var cursor = document.createElement('img') ;
-cursor.loading = true ;
-cursor.onload = function() {cursor.loading = false ;} ;
 cursor.src = window.location.href.split('/').slice(0, -2).join('/') + '/Images/bonhomme.png' ;
 
 var pad = {
@@ -100,19 +98,15 @@ function recompute_minmax() {
   }
 }
 
-function draw_when_loaded(img, x, y, sx, sy, other) {
-  if(img.loading || (other && other.loading)) {
-    if(other) {
-      setTimeout(function() {draw_when_loaded(img, x, y, sx, sy, other) ;}, 100) ;
-    } else {
-      setTimeout(function() {draw_when_loaded(img, x, y, sx, sy, other) ;}, 50) ;
-    }
-  } else {
-    ctx.drawImage(img, x, y, sx, sy) ;
+async function draw(img, x, y, sx, sy, other) {
+  await img.decode() ;
+  if(other) {
+    await other.decode() ;
   }
+  ctx.drawImage(img, x, y, sx, sy) ;
 }
 
-function redraw() {
+async function redraw() {
   ctx.clearRect(0,0,area.width, area.height) ;
 
   var xmin = pad.pen.x < pad.xmin ? pad.pen.x : pad.xmin ;
@@ -135,12 +129,12 @@ function redraw() {
   for(var key in pad.tiles) {
     var img = pad.tiles[key] ;
     var pen = JSON.parse(key) ;
-    draw_when_loaded(img, ox + pen.x * s, oy + pen.y * s, s, s) ;
+    await draw(img, ox + pen.x * s, oy + pen.y * s, s, s) ;
   }
   
   var cs = s / 3 ;
   var cursor_tile = pad.tiles[JSON.stringify(pad.pen)] ;
-  draw_when_loaded(cursor, ox + pad.pen.x * s + cs, oy + pad.pen.y * s + cs, cs, cs, cursor_tile) ;
+  await draw(cursor, ox + pad.pen.x * s + cs, oy + pad.pen.y * s + cs, cs, cs, cursor_tile) ;
 
   local_save() ;
 }