Рисование изображения на холсте с тремя копейками

Question

У меня проблема с холстами. Я изменил пример программы Canvas.hs, чтобы нарисовать изображение на холсте с помощью

canvas # drawImg

сразу после кода установки холста; вот это для справки:

canvas <- UI.canvas
      # set UI.height canvasSize
      # set UI.width  canvasSize
      # set style [("border", "solid black 1px"), ("background", "#eee")]

где drawImg находится

drawImg :: UI.Canvas -> UI ()
drawImg canvas = do
  url <- UI.loadFile "image/png" "resources/img.png"
  img <- UI.img # set UI.src url
  UI.drawImage img (0,0) canvas

это должно быть то же поведение, что и функция щелчка для рисования изображения в исходной версии кода.

Реальное поведение этого кода - пустой холст, как в исходном примере перед нажатием кнопки рисования изображения. Я бы подумал, что это должно нарисовать изображение при загрузке. Почему это? Должен ли я вместо этого добавить этот вызов в строку, которая устанавливает холст?

Answer 1

Это canvas часть DOM? Не забудьте добавить его в тело документа с помощью getBody #+ [...] или т.п.

Однако может возникнуть другая проблема: браузеры обычно загружают URL-адреса изображений асинхронно. На самом деле, я не уверен, загружают ли они URL-адреса изображений вообще, если изображение не является частью DOM, как в вашем примере. В обоих случаях, если вы попытаетесь нарисовать изображение на холсте до того, как будет загружен его URL, ничто не будет нарисовано. (Самый простой способ проверить, является ли эта проблема актуальной в вашем коде, - это нарисовать многоугольники вместо изображения.)