CODEWITHSUNDEEP
htmlcanvashtml5-canvascomputer-science
Sam Skirrow
Sam Skirrow

Reputation: 3697

HTML5 Canvas background image

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 < 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 < 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 < 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 < 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
};
})();

Upvotes: 64

Views: 300439

Answers (5)

Chandler Zwolle
Chandler Zwolle

Reputation: 1725

In case it's helpful... None of these worked for me, so posting what copilot came up with to maintain a clear image while resizing it to fill the canvas (the canvas width is dynamic but the height is resized based on the image's aspect ratio):

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {
    // Get the natural dimensions of the image
    const imgWidth = img.naturalWidth;
    const imgHeight = img.naturalHeight;

    // Calculate the aspect ratio
    const aspectRatio = imgWidth / imgHeight;

    // Get the canvas width
    const canvasWidth = canvas.clientWidth;

    // Calculate the new height based on the canvas width and aspect ratio
    const canvasHeight = canvasWidth / aspectRatio;

    // Set the canvas dimensions
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // Draw the image on the canvas, filling the width and maintaining aspect ratio
    ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
};

img.src = "... image url ...";

Thanks,

Chandler

Upvotes: 0

Emanuel
Emanuel

Reputation: 183

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);
    }
}

Upvotes: 4

Loktar
Loktar

Reputation: 35319

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

Upvotes: 76

Nezar Fadle
Nezar Fadle

Reputation: 1355

Why don't you style it out:

<canvas id="canvas" width="800" height="600" style="background: url('./images/image.jpg')">
  Your browser does not support the canvas element.
</canvas>

Upvotes: 42

Sathiesh
Sathiesh

Reputation: 33

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

Upvotes: -4

Related Questions