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 ?

Possible duplicate of [HTML5 Dynamically create Canvas](https://stackoverflow.com/questions/10652513/html5-dynamically-create-canvas) — Durga, Nov 10 '18 at 07:20
it is not creating in same position as canvas? after clicking first canvas should disappear and new one should get created. — Mayank S. Gupta, Nov 10 '18 at 07:30
yes onclicking it should replace old canvas with new one. first canvas should disappear. — Mayank S. Gupta, Nov 10 '18 at 07:34

score 0 · Answer 1 · answered Nov 10 '18 at 07:59

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>

score 0 · Answer 2 · answered Nov 10 '18 at 08:20

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

Create HTML5 canvas from javascript function

2 Answers2