document.body.appendChild(canvasImage2); [Archive]

ricardosol

12-13-2013, 10:25 AM

Your code works here in IE 7. Perhaps you were trying to execute it before the browser had parsed the body (before onload). If so, there would technically be no body to append to.

Working demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
onload = function(){
var divg = document.createElement("div");
divg.appendChild(document.createTextNode("New DIV"));
document.body.appendChild(divg);
};
</script>
</head>
<body>

</body>
</html>

##########################################################

Hello,

With the following code I intend to create a new image with the text merge on it...
Can you tell me what I am doing wrong?
Thanks in advance,
Ricardo

##########################################################

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image and text</title>

<style id="jsbin-css">
*{margin:0; padding:0;}
body{
background:#000;
color:#fff;
}
canvas{
border-left:2px solid #000;
border-right:2px solid #000;
border-top:2px solid #000;
-webkit-transition:1s;
transition:1s;
margin:40px auto;
display:block;
}
</style>
</head>
<body>

<script>
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 500;
canvas.style.borderRadius = "15px";
document.body.appendChild(canvas); // Add canvas to DOM

// GRAPHICS
var canvasImage = new Image();
canvasImage.src = 'S1110.jpg';

// GRAPHICS TO CANVAS ///////////////////

function drawCanvas(){
ctx.drawImage(canvasImage, 0, 0);

ctx.font = '90px Calibri';
ctx.textAlign = 'center';
ctx.fillStyle = 'rgba(70, 70, 255, 0.7)';
ctx.fillText('Some text', canvas.width/2, canvas.height/2);
}

drawCanvas();

var canvasImage2 = new Image();
canvasImage2.src = drawCanvas();

document.body.appendChild(canvasImage2);

document.images[0].src;

</script>

<a href="send.php" id="send-button" class="btn btn-info">send</a>

</body>
</html>

jscheuer1

12-13-2013, 05:00 PM

You're not really doing anything wrong. More like doing the right things in a confused manner. The only really wrong thing that jumps out at me is:

canvasImage2.src = drawCanvas();

The drawCanvas function has no return value, so that's the same as:

canvasImage2.src = 'undefined';

So of course you see no image. The first image may or may not appear depending upon the browser and whether or not the image is loaded yet. Try (using the onload event of the image to trigger the drawing of the canvas):

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image and text</title>

<style id="jsbin-css">
*{margin:0; padding:0;}
body{
background:#000;
color:#fff;
}
canvas{
border-left:2px solid #000;
border-right:2px solid #000;
border-top:2px solid #000;
-webkit-transition:1s;
transition:1s;
margin:40px auto;
display:block;
}
</style>
</head>
<body>

<script>
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 500;
canvas.style.borderRadius = "15px";
document.body.appendChild(canvas); // Add canvas to DOM

// GRAPHICS
var canvasImage = new Image();

// GRAPHICS TO CANVAS ///////////////////

function drawCanvas(){
ctx.drawImage(canvasImage, 0, 0);

ctx.font = '90px Calibri';
ctx.textAlign = 'center';
ctx.fillStyle = 'rgba(70, 70, 255, 0.7)';
ctx.fillText('Some text', canvas.width/2, canvas.height/2);
}

canvasImage.onload = drawCanvas;
canvasImage.src = 'S1110.jpg';

</script>

<a href="send.php" id="send-button" class="btn btn-info">send</a>

</body>
</html>

Here's a demo:

http://home.comcast.net/~jscheuer1/side/demos/tidbits/canvas.htm