roImageCanvas code not working

This is what I'm trying to do once the user clicks on a content video.

1. Play Video
2. End Video
3. Video repeats (buffers)
4. Instead of showing "retrieving" screen, show a full screen image until buffering finishes
4. Once video starts again, remove screen image and play video normally.
5. Start from step 2

Sub OnVideoPlaybackFinished()
    if m.video.state="finished" then
        m.video.visible = "start"
        m.DetailsListPanel.setFocus(true)
        'This program will display an image on instead of the buffering
    if type(msg) = "roVideoPlayerEvent" then
        if msg.GetMessage() = "start of play"
            m.isLoadingVideo = false
            m.drawCanvas()
        else if msg.GetMessage() = "startup progress" then
            if m.isLoadingVideo <> true then
                m.isLoadingVideo = true
                m.drawCanvas()
            end if
         end if
    end if
    'ending of different images
    end if    
end sub


    
    Sub drawCanvas()
    if m.isLoadingVideo = true
    canvasItems = [
        { 
            url:"http://www.mrwallpaper.com/wallpapers/Blue-Planet-Earth-1280x720.jpg"
            TargetRect:{x:100,y:100,w:400,h:300}
        }
    ]
    canvas = CreateObject("roImageCanvas")
   port = CreateObject("roMessagePort")
   canvas.SetMessagePort(port)
   'Set opaque background
   canvas.SetLayer(0, {Color:"#FF000000", CompositionMode:"Source"})
   canvas.SetRequireAllImagesToDraw(true)
   canvas.SetLayer(1, canvasItems)
   canvas.Show()
   else if m.isLoadingVideo = false
   end if   
End Sub