I'm trying to place the textarea content into canvas but getting undefined message instead on the canvas block. successfully loaded image on it but not textarea. i tried in many ways to solve this but could not solve. please help me. Thanks in Advance.
html code
<textarea>praise the lord</textarea>
<div > <button class="wrapper1" id="saveid" onclick="sharee(0)">SAVE </button> </div>
<img id="scream" src="a.jpg" alt="The Scream" width="70" height="70"><p>Canvas:</p>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
javascript code
function sharee() {
var val = document.getElementById("myCanvas");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
textArea = document.getElementsByTagName("textarea")[0],
ctx.font="30px Arial";
ctx.drawImage(img, 40, 40);
ctx.fillText(textarea, 40,60);
setTimeout(function(){
window.savephotoplugin(canvas,"image/png",device.version,function(val){
//returns you the saved path in val
alert("Photo Saved: " + val);
});
}, 0)
You are trying to draw the textarea element it self as text which won't work.
Try this modification:
ctx.fillText(textArea.value, 40, 60);
and I'm not sure if this is just a typo in the post, but this line needs to be:
var textArea = document.getElementsByTagName("textarea")[0]; //no comma at end
Related
On the W3 Schools HTML5 Canvas Image Page, they use an <img> tag on the page before they load their canvas. Their code is below.
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
</script>
I have a map (as an image) that I have loaded on a server that I need to use, but I cant find a way to only have the one image on the canvas. For example...
The left one is the image that I am using, but I need it for the one on the right (which is a canvas) to work.
Any tips?
Use JS to create an image
If you know the path to the image, or can provide it, you can use the following to create an image. It's important to note the image does take time to load and you cannot use the image successfully before it is loaded.
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.createElement("img");
img.onload = function() {
ctx.drawImage(img, 10, 10);
}
// triggers onload event (after it loads of course)
img.src = "//via.placeholder.com/350x150";
}
<p>Canvas:</p>
<canvas id="myCanvas" width="370" height="170" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
I have forms with arbitrary numbers of canvases. Once one is filled out I would like to copy it to any other canvas that is interacted with.
I have currently
When one canvase is closed I save the canvas data
sourceCanvas = $(this).find('canvas')[0];
Then when the next one loads (they are in modals)
I try to populate it like this
var destCtx = $(this).find('canvas')[0].getContext('2d');
destCtx.drawImage(sourceCanvas, 0, 0);
I am getting this error
Uncaught
TypeError: Failed to execute 'drawImage' on
'CanvasRenderingContext2D': The provided value is not of type
'(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
Is ('canvas')[0] the wrong thing to grab? should I be getting something else in the canvas element?
Thanks!
When one canvase is closed I save the canvas data
sourceCanvas = $(this).find('canvas')[0];
I think that your code is not accessing the image data in the source canvas.
Call getImageData() on the context of the source canvas then get call putImageData() on the context of the destination canvas
.
Below is a simple example which copies the image data from canvas1 into both canvas1 (at a different location for illustration) and also into canvas2.
Also, check out this excellent text on HTML5 Canvas.
<html>
<body>
<canvas id="canvas1" width="300" height="150" style="border:1px solid #f00;">no canvas</canvas>
<canvas id="canvas2" width="300" height="150" style="border:1px solid #00f;">no canvas</canvas>
<script>
var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");
var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(10, 10, 50, 50);
function copy() {
var imgData = ctx1.getImageData(10, 10, 50, 50);
ctx1.putImageData(imgData, 10, 70);
ctx2.putImageData(imgData, 10, 70);
}
</script>
<button onclick="copy()">Copy</button>
</body>
</html>
I was trying to execute this code in webmatrix. But don't know why I'm not getting result. I'm getting original image but not in canvas. Also I'm new to webmatrix.
Here is my code:
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="happy.png" alt="The Scream" width="220" height="277">
<p>Canvas</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
</body>
</html>
This is not a problem concerning the Web Pages framework and WebMatrix, but the Canvas API.
Before to instantiate the drawImage() method the code must wait that the image is loaded. You can accomplish this by using the onload property of the image object as in the example that follows:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function () {
ctx.drawImage(img, 10, 10);
}
</script>
I am trying to make work a button that would open a new window with the content of my canvas in it (a rendered image of the canvas).
Here's my JS code :
var canvas = document.getElementById("thecanvas");
var dataUrl = canvas.toDataURL();
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
function clickme() {
window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}
HTML code :
<input type="button" onclick="clickme()" value="OPEN"/>
<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">
But when I click on the "OPEN" button, nothing happens...but I really don't see why. I have looked on alot of sites for tutorials. I even copied and pasted some codes, but still nothing happens. Am I doing something wrong? Thank you!
First off, the order in which you execute your statements matters. You need to call toDataURL after you draw to the canvas, or the dataURL generated with not contain that content.
I'm not sure what your script tags are like, but here's a working example that does the event in a slightly more foolproof way: http://jsfiddle.net/b7G6J/
HTML:
<input id="thebutton" type="button" value="OPEN"/>
<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">
JS:
var canvas = document.getElementById("thecanvas");
var context = canvas.getContext("2d");
// First drawing commands
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
// Then toDataURL
var dataUrl = canvas.toDataURL();
var button = document.getElementById("thebutton");
button.onclick =function() {
window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}
I am trying to draw a canvas created through javascript on another canvas. But it is not working for me,
Here is my code,
<!DOCTYPE HTML>
<html>
<head>
</script>
<script>
window.onload = function(){
var can1 = document.createElement('canvas');
can1.width = 150;
can1.height = 140;
can1.style.cssText = 'top:2px;left:2px;border:2px solid black;';
var ctx1 = can1.getContext('2d');
var img=new Image();
img.src="images/211.jpg"
ctx1.drawImage(img,0,0);
var can = document.getElementById("c");
var ctx = can.getContext('2d');
ctx.drawImage(can1,0,0);
var canvas = document.getElementById("c");
window.open(canvas.toDataURL());
}
</script>
</head>
<body >
<canvas id="c" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
</body>
</html>
I think the problem was that, when you were trying to drawImage that image into the canvas, image was not ready. so if u do this it works perfectly:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var imageObj = new Image();
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
var dynamicCanvas = document.createElement("canvas");
var dynamicContext = dynamicCanvas.getContext("2d");
dynamicCanvas .height="400";
dynamicCanvas.width="578";
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
imageObj.onload = function() {
dynamicContext.drawImage(imageObj, 69, 50);
context=context.drawImage(dynamicCanvas,69,50);
window.open(canvas.toDataURL());
};
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
and you can adjust the height and width of the dynamic canvas.
if you remove that window.open statement, its perfect.
but there is a problem with canvas.toDataURL()
when you try to do canvas.toDataURL() for a local file, it gives a security error (if you inspect it through google chrome) i.e.
Uncaught Error: SECURITY_ERR: DOM Exception 18
you can know more about this error : here
(see if you are getting this error). anyways, the root cause is sorted out, and there's a new problem now altogether :D..anyways better luck!!
The problem with an incorrect image display using the original code of MJQ is that he doesn't stated the size of the second canvas directly through attributes - only through style. Thus browser created a canvas of default size (300x150 for FF) and then stretched it to 250x350.
So the following modification will solve the image display:
<canvas id="c" width="250" height="350" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
Maybe this will help someone in the future.
what are you taking about? your code is working.
(If am getting your question correctly) I added following lines after
can1.style.cssText='border:2px solid black;';
:
var ctx1 = can1.getContext('2d');
ctx1.rect(50, 50, 500, 500);
ctx1.fillStyle = '#8ED6FF';
ctx1.fill();
and upon execution, i see a beautiful rectangle inside!!
are you using html5 supporting browser??