Создать HTML5 холст из функции JavaScript

Question

Вот мой HTML

<p>
   <canvas id="canvas" width="340" height="460" style="border:1px solid #BBBBBB;"></canvas>
</p>

мой JS

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.src = 'abc.jpg';

Теперь я хочу создать новый холст в той же позиции из новой функции JavaScript как

function newCanvas () {
    can.width = X;
    can.height = Y;

    var newCanvas = document.getElementById('canvas');
    var img = new Image();
    img.src = 'xyz.jpg';    
    var ctx = newCanvas.getContext('2d');
}

При нажатии кнопки новый холст должен быть создан в той же позиции.

есть ли способ?

Answer 1

вам нужно .drawImage() в onload событие

function newCanvas() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.src = document.getElementById('inputImg').value;
  img.onload = function() {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(img,  0, 0);  
  }
}

<input style="width: 300px" type="text" id="inputImg" placeholder="image url" value="https://lorempixel.com/output/nature-q-c-300-300-3.jpg">
<input type="button" onclick="newCanvas()" value="set image">

<p><canvas id="canvas" width="300" height="300" style="border:1px solid #BBBBBB;"></canvas></p>

Answer 2

Здесь Вы можете видеть оба холста, накладывающиеся друг на друга. после нажатия второй сначала следует разархивировать. Но оба видны.

<script type="text/javascript">
function canvasA(){
var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";
canvas.width = 340;
canvas.height = 460;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);
document.body.appendChild(canvas);
};

function character(){
var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";
canvas.width = 340;
canvas.height = 460;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);
document.body.appendChild(canvas);
 };

</script>
<button onclick="canvasA();">Hello</button>
<button onclick="character();">Hello</button>
</body>