Load static files to Canvas

[riprsa]

First of all, thank you for this package. It is soo cool that I can write Go code for browsers!

I am writing a simple bullet-hell game. I almost finished basic logic and now want to add textures. However, I do not understand how to add an image to Canvas.

I have a variable of type app.HTMLImg, which is initialised with image := app.Img().Src("/web/assets/rat.png"). I tried to render only the image as a separate component and it works, so issue is not with an empty variable. Also I can locate it by path through address bar.

I cannot figure out how to use this image variable with context2D.Call("drawImage", image, 0, 0). I also tried to use image.JSValue(), but it did not help. I get this error:

panic: JavaScript error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.

I have no idea how to correctly get drawImage to work.

[oderwat]

    cvEl := app.Window().GetElementByID(c.Id)
    cvCtx := cvEl.Call("getContext", "2d")
    c.done = make(chan struct{})
    img := app.Window().Get("document").Call("createElement", "img")
    img.Set("src", "/web/logo-512.png")
    //app.Window().Get("document").Get("body").Call("appendChild", img)
    img.Call("addEventListener", "load", app.FuncOf(func(app.Value, []app.Value) interface{} {
        dbg.Log("image is loaded")
        ctx.Async(func() {
            var renderFrame app.Func
            c.running = true
            renderFrame = app.FuncOf(func(this app.Value, args []app.Value) interface{} {
                if c.running {
                    app.Window().Call("requestAnimationFrame", renderFrame)
                } else {
                    close(c.done)
                }
                cvCtx.Call("drawImage", img, 0, 0)
                return nil
            })
            defer renderFrame.Release()
            // start the rendering
            app.Window().Call("requestAnimationFrame", renderFrame)
            // wait till the channel gets closed
            <-c.done
            dbg.Log("closed")
        })
        return nil
    }))

[riprsa]

Works like a charm, thank you!