background image to canvas javascript code example

Example: how to set background image in canvas using javascript

I believe that you may be trying to use the background image before has complted loading but you can also use these approaches with CSS.

You can use CSS and either define in your style block or dynamically set it in JS.

<style>

#gameCanvas{
    background-image:    url(/images/backGround.jpg);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center;
}
</style>
or if prefer in JS:

document.getElementById("gameCanvas").style.background = "url('/images/backGround.jpg')";
NB - make sure the image is access to the browser. Also check your console for errors if using JS - the JS may be breaking with an error before reaching your code. Also for a working example see HTML5 Canvas background image