HTML5 Canvas background image

Question

I m trying to place a background image on the back of this canvas script I found  I know it s something to do with the context fillstyle but not sure how to go about it  I d like that line to read something like this   context fillStyle    url  http   www samskirrow com background png       Here is my current code   var waveform    function      var req   new XMLHttpRequest    req open  GET    js jquery-1 6 4 min js   false   req send    eval req responseText   req open  GET    js soundmanager2 js   false   req send    eval req responseText   req open  GET    js soundcloudplayer js   false   req send    eval req responseText   req open  GET    js raf js   false   req send    eval req responseText       soundcloud player setup  soundManager usePolicyFile   true  soundManager url    http   www samskirrow com client-kyra js    soundManager flashVersion   9  soundManager useFlashBlock   false  soundManager debugFlash   false  soundManager debugMode   false  soundManager useHighPerformance   true  soundManager wmode    transparent   soundManager useFastPolling   true  soundManager usePeakData   true  soundManager useWaveformData   true  soundManager useEqData   true   var clientID    345ae40b30261fe4d9e6719f6e838dac   var playlistUrl    https   soundcloud com kyraofficial sets kyra-ft-cashtastic-good-love    var waveLeft       var waveRight           canvas animation setup var canvas  var context   function init c        canvas   document getElementById c       context   canvas getContext  2d        soundManager onready function             initSound clientID  playlistUrl               aniloop       function aniloop         requestAnimFrame aniloop       drawWave       function drawWave          var step   10      var scale   60          clear     context fillStyle     ff19a7       context fillRect 0  0  canvas width  canvas height           left wave     context beginPath         for   var i   0  i  lt  256  i               var l    i  256-step     1000          var t    scale   waveLeft i    -scale            if  i    0            context moveTo l t             else           context lineTo l t     change  128  to vary height of wave  change  256  to move wave up or down                   context stroke             right wave     context beginPath        context moveTo 0  256       for   var i   0  i  lt  256  i               context lineTo 4   i  255   waveRight i    128              context lineWidth   0 5      context strokeStyle     000       context stroke       function updateWave sound        waveLeft   sound waveformData left     return       init   init            Revised code - currently just showing black as the background  not an image      canvas animation setup var backgroundImage   new Image     backgroundImage src    http   www samskirrow com images main-bg jpg    var canvas  var context   function init c        canvas   document getElementById c       context   canvas getContext  2d        soundManager onready function             initSound clientID  playlistUrl               aniloop       function aniloop         requestAnimFrame aniloop       drawWave       function drawWave          var step   10      var scale   60          clear     context drawImage backgroundImage  0  0       context fillRect 0  0  canvas width  canvas height           left wave     context beginPath         for   var i   0  i  lt  256  i               var l    i  256-step     1000          var t    scale   waveLeft i    -scale            if  i    0            context moveTo l t             else           context lineTo l t     change  128  to vary height of wave  change  256  to move wave up or down                   context stroke             right wave     context beginPath        context moveTo 0  256       for   var i   0  i  lt  256  i               context lineTo 4   i  255   waveRight i    128              context lineWidth   0 5      context strokeStyle     ff19a7       context stroke       function updateWave sound        waveLeft   sound waveformData left     return       init   init            You can see the site that I m working on here  http   www samskirrow com client-kyra

User · Answer

Make sure that in case your image is not in the dom, and you get it from local directory or server, you should wait for the image to load and just after that to draw it on the canvas.

something like that:

function drawBgImg() {
    let bgImg = new Image();
    bgImg.src = '/images/1.jpg';
    bgImg.onload = () => {
        gCtx.drawImage(bgImg, 0, 0, gElCanvas.width, gElCanvas.height);
    }
}

User · Answer

Canvas does not using  png file as background image  changing to other file extensions like gif or jpg works fine

User · Answer

Theres a few ways you can do this  You can either add a background to the canvas you are currently working on  which if the canvas isn t going to be redrawn every loop is fine  Otherwise you can make a second canvas underneath your main canvas and draw the background to it  The final way is to just use a standard  lt img gt  element placed under the canvas  To draw a background onto the canvas element you can do something like the following   Live Demo  var canvas   document getElementById  canvas        ctx   canvas getContext  2d     canvas width   903  canvas height   657    var background   new Image    background src    http   www samskirrow com background png       Make sure the image is loaded first otherwise nothing will draw  background onload   function        ctx drawImage background 0 0            Draw whatever else over top of it on the canvas

User · Answer

Why don t you style it out    lt canvas id  canvas  width  800  height  600  style  background  url    images image jpg    gt    Your browser does not support the canvas element   lt  canvas gt

[html] HTML5 Canvas background image

Examples related to html

Examples related to canvas

Examples related to html5-canvas

Examples related to computer-science