How to Center Image above another image inside canvas element

Question

I'm trying to add Images above another image in the canvas element

What I'm trying to reach:

Here is what I get:

images source: https://i.stack.imgur.com/L1Dxu.jpg

and this my code:

var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";

var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";




window.onload = function() {
var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");    
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);


ctx.drawImage(draw,0,0 );




ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}

#canvas{
    width: 352px;
    height: 448px; 
    left: 0px; 
    top: 0px; 
    user-select: none; 
    cursor: default;
}

<canvas id="canvas" width="352" height="448"></canvas>

score 1 · Answer 1 · answered Jun 27 '20 at 12:51

you can set this like ctx.drawImage(draw,100,30,90,50 );

var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";

var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";




window.onload = function() {
var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");    
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);


ctx.drawImage(draw,80,25,135,55 );




ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}

#canvas{
    width: 352px;
    height: 448px; 
    left: 0px; 
    top: 0px; 
    user-select: none; 
    cursor: default;
}

<canvas id="canvas"></canvas>

I don’t know why but the image " `draw` " quality is too bad! — A. El-zahaby, Jun 27 '20 at 12:55

score 0 · Answer 2 · answered Jun 27 '20 at 12:14

0

I think what you're looking for it's flex-box

#canvas{
  display:flex;
  justify-content: center;
  align-content: center;
}

Here you can read more about the flex-box

answered Jun 27 '20 at 12:14

GersonSalvador

12
4

thank you for sharing, but of course not! its something relates to JS, not CSS,, read more about `CANVAS` – A. El-zahaby Jun 27 '20 at 12:41

A. El-zahaby · Accepted Answer · 2020-06-29T16:04:28.710

thanks to @tokage-dizayn and https://stackoverflow.com/a/19473880/7511165

I came to this code

var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";

var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";




window.onload = function() {
  var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");    
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    console.log(draw.height,draw.width);
    
    var maxSize  = 160;
    var ratio = Math.min(maxSize  / draw.width, maxSize / draw.height);
    var width= draw.width*ratio, 
        height= draw.height*ratio;
    
    console.log(ratio,width,height);

        
    ctx.drawImage(draw,95,90,width,height);
    
    
    
    
    ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}

#canvas{
    width: 352px;
    height: 448px; 
    left: 0px; 
    top: 0px; 
    user-select: none; 
    cursor: default;
}

<canvas id="canvas" width="352" height="448"></canvas>

How to Center Image above another image inside canvas element

3 Answers3