Creating visual content on Canvas using JavaScript

Having an issue with stacking multiple images on separate Canvas layers, and they're not drawing on the canvas. Can anyone help me figure out what I'm 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);

}
}

Answer №1

It's important to use the onload mechanism for image loading because it is asynchronous. If you don't do this, the images may not be fully loaded when you attempt to use them, resulting in blank canvas(es).

...

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the each() method in jQuery essentially a for loop?

Experimenting with adding a serialized class to a group of objects, I attempted the following approach: jQuery('#preload img').each(function(){ jQuery('#thumbs').append('<img class="index' + index + '" src="&apos ...

Utilizing the Express-busboy npm package to generate a new directory within the public folder of

While working on my controller, I encountered an issue when trying to readFile sent from the browser via AJAX. Unexpectedly, a directory was created in my public folder with a name like '3d6c3049-839b-40ce-9aa3-b76f08bf140b' -> file -> ...

"I'm looking for a solution on integrating Osano CookieConsent into my Next.js application. Can

I'm facing a bit of a challenge with incorporating the Osano Cookie Consent JavaScript plugin into my nextjs app. I've been attempting to set up the cc object by initializing it in the useEffect of my root landing page: const CC = require( " ...

Tips for preserving data while attempting to access the schema

Attempting to store data from a book that includes author and genre information, referenced in separate files. The issue arises when making the reference in the main schema. Although the book carries details of the book itself, it fails to establish refer ...

Attempting to utilize Flexbox to populate vacant areas

https://i.stack.imgur.com/BhPU0.png Can the yellow square smoothly transition to the empty grey square and beyond in this layout setup? Each flex item represents a component that can utilize either 50% or 100% of the container width, information only know ...

Is it achievable to animate dynamic height using CSS? Open to JS alternatives as well

I am currently utilizing AngularJS, which enables me to utilize ng-show and ng-hide in order to display or hide elements based on a logical condition. My goal is to animate the size changes of the container when the child objects are shown or hidden, creat ...

Updating the jQuery AJAX URL dynamically based on user input in a form submission

Exploring the world of AJAX and form submission, I find myself in need of assistance. My webpage is designed to display real-time stock market data, updating fields with the latest price, change, high, low, and more. I am currently attempting to modify th ...

The recently introduced button following an ajax request fails to trigger the expected event

How can I ensure jQuery still works after adding a new button with AJAX? $('button.btn').on('click', function(form) Here is a sample existing button on initial page load: <button id="5" class="yellow-button btn">Publish</but ...

Can multiple shadow hosts utilize a common shadow DOM?

As I navigate the world of Web Components, I find myself still grappling with a full understanding of its capabilities. One thing that stands out to me is the numerous advantages it offers. A burning question in my mind is whether it's feasible to sh ...

How can I display a popup window within an iframe on a separate full page?

I am facing an issue while creating an HTML table using AngularJS with a popup. The problem is that I want the popup window, which shows a graph, to open up on the entire page instead of in a specific div. My desired output should look like this: https://i ...

Bring a div box to life using AngularJS

Struggling to animate a div-Box in AngularJS? Despite trying multiple examples, the animation just won't cooperate. I'm aiming to implement a feature where clicking on a button triggers a transition animation to display the search form. I under ...

What is the best way to transform a JSON data-storing object into an array within Angular?

I am currently working on developing a machine learning model using tensorflow.js, but I have encountered a roadblock. The issue I am facing is that I have stored my JSON content in a local object, but for it to be usable in a machine learning model, I ne ...

Ways to maintain uniform size in displaying images even when they are of different dimensions

Within my web application, administrators have the ability to upload various images that will be displayed on the site. The challenge arises from the fact that these images come in different sizes and dimensions. However, it is important that all users w ...

Creating a Dynamic Slideshow on Autopilot

My JavaScript skills are not perfect and I'm feeling a bit lost. I have this code for a slideshow, but I want to make it automatic while also allowing users to navigate between images freely. I'm struggling to figure out how to implement this fun ...

Help kids find solutions

Here is the HTML code I am working with: <div class = "touch" onclick="do(this)"> <span>text01</span> <span>text02</span> <span>text03</span> <span>text04</span> <div class = "findMe">a ...

Streamlining form submission processes with VBA automation of check box selections

Currently, I am facing a challenge with automating the process of filling out a web form using VBA. Specifically, I have hit a roadblock when it comes to selecting a checkbox in the form before proceeding. Here is the HTML code pertaining to the checkbox: ...

The nightmare of Parent-Child Inheritance in JQuery/CSS is a constant struggle

Having difficulty implementing specific JQuery effects into a Bootstrap framework due to its extensive CSS causing issues. Created a test file named testjquery.html connected to a stylesheet defining a hidden element and activating the fade in of this ele ...

What is the best way to center a div vertically within a bootstrap 5 carousel across all screen sizes?

Looking to center the text div within a Bootstrap 5 carousel both vertically on large screens and small (mobile) screens. To view the site, visit... Below is the HTML for the div. The targeted div has the CSS class #hero .carousel-container { display ...

The Intriguing Riddle of HTML Semantic

I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...

jQuery load() function triggers unexpected error in jQuery plugin

Here is the current structure of my page: <body> <div id="menuBar"> </div> <canvas id="myCanvas" width="700" height="700" style="border:1px solid #000000;"></canvas> </body> <script src="../Scripts/jQuery.mazeBo ...