CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Dungeon
Dungeon

Reputation: 1040

how to draw two image with style in canvas?

I want to draw two images with some style over single canvas. My requirement is like this: I tried this:

<canvas id="viewport" width="1000" height="1000"></canvas>
canvas {
  border: 1px solid blue;
    width: 100%;
    height:auto;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    overflow: hidden;
}

My javascript:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'light-landscape.jpg';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0,canvas.width, canvas.height);
  }
}

But this style is properly designed for Image1. How can I place the Image2 inside box on the same canvas. Is this possible? enter image description here

Upvotes: 3

Views: 2123

Answers (1)

enxaneta
enxaneta

Reputation: 33044

I'm not very sure that this is what you need

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
let cw = canvas.width = 1000,
  cx = cw / 2;
let ch = canvas.height = 1000,
  cy = ch / 2;



make_base('https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg',0,0,cw,ch);
make_base('https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png',500,500,100,100);

function make_base(url,x,y,w,h)
{
  let base_image = new Image();
  base_image.src = url;
  base_image.onload = function(){
    context.drawImage(base_image, x, y,w, h);
  }
}
canvas {
  border: 1px solid blue;
    width: 100%;
    height:auto;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    overflow: hidden;
}
<canvas id="viewport" width="1000" height="1000"></canvas>

UPDATE: In this case I had to use the method clip() to cut the first image.

const ctxa = a.getContext("2d");
const ctxb = b.getContext("2d");
const ctxc = c.getContext("2d");


let cw = a.width = b.width = c.width = 1000;
let ch = a.height = b.height = c.height = 1000;


// using clip() to cut the first canvas
ctxa.beginPath();
ctxa.moveTo(0,0)
ctxa.lineTo(0,500)
ctxa.arc(500,500,500,Math.PI,0,true);
ctxa.lineTo(1000,0);
ctxa.closePath();
ctxa.clip();

make_base(ctxa,'https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg',0,0,cw,ch);
make_base(ctxb,'https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png',0,0,cw,ch);

function make_base(ctx,url,x,y,w,h)
{
  let base_image = new Image();
  base_image.src = url;
  base_image.onload = function(){
  ctx.drawImage(base_image, x, y,w, h);
  }
}


button.addEventListener("click",()=>{
  let imga = a;
  let imgb = b;
  ctxc.drawImage(imga,0,0,cw,ch,200,0,600,600); 
  ctxc.drawImage(imgb,0,0,cw,ch,400,800,200,200); 
  
})
#a, #b,#c{width:100px; border: 1px solid blue;}
<canvas id="a" width="1000" height="1000"></canvas>
<canvas id="b" width="1000" height="1000"></canvas>
<canvas id="c" width="1000" height="1000"></canvas>

<button id="button">click</button>

Upvotes: 8

Related Questions