如何在画布上绘制两个风格的图像？

Question

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?

Answer 1

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>