CODEWITHSUNDEEP
javascriptcsshtmlcanvas
Josh.S
Josh.S

Reputation: 127

JS drawing Images on Canvas

I'm trying to past multiple images on separate Canvas layers that are stacked upon each other yet the images aren't drawing on the canvas. Can someone help me out with what I am missing? Thanks

CSS

   .positionCanvas{
            position: absolute;
            left:0;
            right:0;
            margin-left:auto;
            margin-right:auto;
        background: rgba(255,255,255,0);
    }

    #logoCanvas{
        position: relative;
    }

HTML

<div id="logoCanvas">
        <canvas class="positionCanvas" width="300" height="300" id="outerRingCanvas">

        </canvas>
        <canvas class="positionCanvas" width="300" height="300" id="crossCanvas">

        </canvas>
        <canvas class="positionCanvas" width="300" height="300" id="innerRingsCanvas">

        </canvas>
        <canvas class="positionCanvas" width="300" height="300" id="centreCanvas">

        </canvas>

    </div>

JAVASCRIPT

var outerRing = document.getElementById('outerRingCanvas'),
    cross = document.getElementById('crossCanvas'),
    innerRings = document.getElementById('innerRingsCanvas'),
    centre = document.getElementById('centreCanvas');



var outerCtx = outerRing.getContext('2d'),
    crossCtx = cross.getContext('2d'),
    innerRingsCtx = innerRings.getContext('2d'),
    centreCtx = centre.getContext('2d');

var ctxArray = [outerCtx, crossCtx, innerRingsCtx, centreCtx];

var outerImg = new Image(),
    crossImg = new Image(),
    innerRingsImg = new Image(),
    centreImg = new Image();

var imgArray = [outerImg, crossImg, innerRingsImg, centreImg];

    outerImg.src = "logo_ring.png";
    crossImg.src = "logo_cross.png";
    innerRingsImg.src = "logo_centre_rings.png";
    centreImg.src = "logo_centre.png";
placeLogos(ctxArray);
crossCtx.drawImage(crossImg, 0, 0, 300, 300);



function placeLogos(array){
    for(var i = 0; i < array.length; i++){
        array[i].drawImage(imgArray[i], 100, 100, 100, 100);
        array[i].fillStyle = "rgba(233,100,10,0.2)"
        array[i].fillRect(0, 0, 300, 300);

    }
}

Upvotes: 0

Views: 86

Answers (1)

user1693593
user1693593

Reputation:

Use the onload mechanism as image loading is asynchronous. If you're not using this the image may not be fully loaded when you try to use them leaving the canvas(es) blank.

...

var imageCount = 4;

outerImg.onload = loader;
crossImg.onload = loader;
innerRingsImg.onload = loader;
centreImg.onload = loader;

outerImg.src = "logo_ring.png";
crossImg.src = "logo_cross.png";
innerRingsImg.src = "logo_centre_rings.png";
centreImg.src = "logo_centre.png";

function loader() {
    imageCount--;

    if (imageCount === 0) {
        placeLogos(ctxArray);
        crossCtx.drawImage(crossImg, 0, 0, 300, 300);
    }
}

Upvotes: 1

Related Questions