2D Canvas (behind a 3D Canvas) not drawing images

Question

I'm currently exploring with Three.js, and working on a small project of mine. The project consists on having a canvas focused on 3D models and animations, and another one behind, which handles the simpler 2D work.

I've set up the 3D canvas properly, so it's background is transparent, and I can see boxes I draw manually on the 2D canvas, which leads me to assume the setup is right.

The issue I'm having is when it comes to images. I simply cannot get an image to display on the 2D canvas. I've experimented on a separate project, and could draw Images there, no problem. The code is pretty basic, and I actually found it here, but is as follows:

 window.onload = function() { var canvas = document.getElementById('bgcanvas'); var context = canvas.getContext('2d'); var logoText = new Image(); logoText.onload = function() { context.drawImage(logoText, 69, 50); }; logoText.src = 'images/logotext.png'; }

 #canvas { position: fixed; z-index: 0; } #bgcanvas { z-index: -10; position: fixed; width: 100vw; height: 100vh; }

 <div id="fixedContainer"> <canvas id="bgcanvas"></canvas> <canvas id="canvas"></canvas> </div>

What's going on that I'm unaware of? Massive thanks in advance!

UPDATE EDIT: The issue was that I had an image on which the top left corner was transparent, and didn't know the image would stretch. user3412847's comment helped me figure it out

Answer 1

Specifying image width and height is a good habit to get into. Use this syntax: context.drawImage(image, x, y, width, height) .

Hope this helps.

Answer 2

I'm guessing you don't have an image at that path; It works fine for me with a valid image (eg: http://lorempixel.com/100/100 ):

 window.onload = function() { var canvas = document.getElementById('bgcanvas'); var context = canvas.getContext('2d'); var logoText = new Image(); logoText.onload = function() { context.drawImage(logoText, 69, 50); }; logoText.src = 'http://lorempixel.com/100/100'; }

 #canvas { position: fixed; z-index: 0; } #bgcanvas { z-index: -10; position: fixed; width: 100vw; height: 100vh; }

 <div id="fixedContainer"> <canvas id="bgcanvas"></canvas> <canvas id="canvas"></canvas> </div>