diff --git a/js/draw.js b/js/draw.js index fbc24af9b5727bcdf4b6ac7dd84f29e6a9f85ddd..d73209c55b5439877dadaccb432f3b444f25bcb6 100644 --- a/js/draw.js +++ b/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() ; }