Difficulty using `draw-image` function

Architecture Hoot: Guile in WASM
,
1

Hi,

I’m playing around with @dthompson’s guile-hoot-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.

(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.

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!

2

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.

1 Like
3

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

(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))
1 Like