Create HTML5 canvas from javascript function

Question

Here is my html

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

my js

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

Now I want to create new canvas in same position from new javascript function like

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');
}

On Button click new canvas should be created in same position.

is there any way ?

Answer 1

Here You can see both canvas overlapping to each other. after clicking second first should disapper. But both are visiable.

<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>

Answer 2

you need .drawImage() in onload event

 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-qc-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>