# Difficulty using \`draw-image\` function

**URL:** <https://community.spritely.institute/t/difficulty-using-draw-image-function/738>\
**Category:** Hoot: Guile in WASM\
**Tags:** debugging, hoot\
**Created:** [June 15, 2025, 10:46pm UTC](https://community.spritely.institute/t/difficulty-using-draw-image-function/738 "2025-06-15T22:46:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kryptec](https://avatars.discourse-cdn.com/v4/letter/k/f05b48/32.png) [@kryptec](https://community.spritely.institute/u/kryptec)\
**Post date:** [June 15, 2025, 10:46pm UTC](https://community.spritely.institute/t/difficulty-using-draw-image-function/738/1 "2025-06-15T22:46:17Z")

</div>

Hi,

I’m playing around with @dthompson’s [guile-hoot-jam-template](https://gitlab.com/spritely/guile-hoot-game-jam-template), but I can’t seem to get the `draw-image` function to work (probably because I’m just doing something dumb).

I can run the template and play the game fine, as well as edit the level to remove layers of bricks.

However, when I try to strip the code down to draw a single brick to the canvas I get nothing from the below code.

```auto
(import (scheme base)
        (scheme inexact)
        (hoot debug)
        (hoot ffi)
        (hoot hashtables)
        (hoot match)
        (dom canvas)
        (dom document)
        (dom element)
        (dom event)
        (dom image)
        (dom media)
        (dom window)
        (dom console)
        (math)
        (math rect)
        (math vector))

;; Assets
(define image:paddle (make-image "assets/images/paddle.png"))
(define image:ball (make-image "assets/images/ball.png"))
(define image:brick-red (make-image "assets/images/brick-red.png"))
(define image:brick-green (make-image "assets/images/brick-green.png"))
(define image:brick-blue (make-image "assets/images/brick-blue.png"))
(define audio:brick (make-audio "assets/sounds/brick.wav"))
(define audio:paddle (make-audio "assets/sounds/paddle.wav"))

(define canvas (get-element-by-id "canvas"))
(define context (get-context canvas "2d"))

(define game-width 640.0)
(define game-height 480.0)
(define brick-width 64.0)
(define brick-height 32.0)

(set-element-width! canvas (exact game-width))
(set-element-height! canvas (exact game-height))

(draw-image context image:brick-blue
            0.0 0.0
            brick-width brick-height
            10.0 10.0
            brick-width brick-height)

```

When I load the page and then try and do it by running the below javascript in the console it works as expected though. It is my understanding that these two should essentially be equivalent, so I’m not sure where I’m going wrong at this point.

```auto
can = document.getElementById("canvas")
context = can.getContext("2d")
const img = new Image()
img.src = "assets/images/brick-blue.png"
context.drawImage(img, 0.0, 0.0, 64.0, 32.0, 10.0, 10.0, 64.0, 32.0)

```

I also have no problem filling the canvas with different coloured rectangles using the provided hoot functions, so it really just seems to be the `draw-image` function that I’m struggling with.

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![dthompson](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.spritely.institute/dthompson/32/95_2.png) [@dthompson](https://community.spritely.institute/u/dthompson)\
**Post date:** [June 16, 2025, 4:08pm UTC](https://community.spritely.institute/t/difficulty-using-draw-image-function/738/2 "2025-06-16T16:08:42Z")

</div>

I’m not certain, but there’s a possibility that this is a timing issue with loading the image file. That’s one notable difference between drawing an image and drawing shapes. I can’t explain why the JS program produces the correct result, though.

---

<div class="post-metadata">

**Author:** ![kryptec](https://avatars.discourse-cdn.com/v4/letter/k/f05b48/32.png) [@kryptec](https://community.spritely.institute/u/kryptec)\
**Post date:** [June 18, 2025, 6:58am UTC](https://community.spritely.institute/t/difficulty-using-draw-image-function/738/3 "2025-06-18T06:58:01Z")

</div>

Thanks for the tip! Adding a load listener like below solved the issue for me.

```auto
(define (draw event)
  (draw-image context image:brick-blue
              0.0 0.0
              brick-width brick-height
              10.0 10.0
              brick-width brick-height))

(add-event-listener! image:brick-blue "load"
                     (procedure->external draw))

```