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>
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 am currently working on a web-application. As part of it I am creating SVG-images internally. When it comes to rendering, I used the approach provided in this question in order to convert the svg to a bitmap and displaying it on a canvas: https://stackoverflow.com/a/23667012/5767042
Most of the times this works fine, however sometimes it does not render the SVG image. Using the chrome DevTools, I was able to confirm that the object being passed to drawImage() (in the example below this would be imageBitmap) is the same in every call, however sometimes it gets rendered and sometimes it does not. I don't understand this behaviour at all.
var svgStr = "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" shape-rendering=\"crispEdges\" stroke-linecap=\"square\"><line x1=\"0\" y1=\"0\" x2=\"50\" y2=\"50\" stroke=\"rgb(0,0,0)\" stroke-width=\"4\"\/><line x1=\"0\" y1=\"50\" x2=\"50\" y2=\"0\" stroke=\"rgb(0,0,0)\" stroke-width=\"4\"\/><\/svg>";
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imageBitmap = new Image();
imageBitmap.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
console.log('drawing bitmap');
ctx.drawImage(imageBitmap, 0, 0);
<canvas id="myCanvas" width="200" height="100"></canvas>
Am I using drawImage() in a wrong way? I had the same behaviour in Firefox, Edge doesn't work at all. I also tested it on three different machines, no difference.
You need to wait until the image is finished loading. For that you can use the .onload handler of the image, which is called when it's loaded.
var svgStr = "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" shape-rendering=\"crispEdges\" stroke-linecap=\"square\"><line x1=\"0\" y1=\"0\" x2=\"50\" y2=\"50\" stroke=\"rgb(0,0,0)\" stroke-width=\"4\"\/><line x1=\"0\" y1=\"50\" x2=\"50\" y2=\"0\" stroke=\"rgb(0,0,0)\" stroke-width=\"4\"\/><\/svg>";
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imageBitmap = new Image();
imageBitmap.src = 'data:image/svg+xml;base64,' + window.btoa(svgStr);
function drawBitmap() {
console.log('drawing bitmap');
ctx.drawImage(imageBitmap, 0, 0);
}
imageBitmap.onload = drawBitmap;
<canvas id="myCanvas" width="200" height="100"></canvas>
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>
My Code is like this
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas>
<img id="canvasImg" onclick="myFunction()" alt="Right click to save me!">
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function myFunction() {
var c = document.getElementsByTagName("canvas");
// save canvas image as data url (png format by default)
var dataURL = c.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
}
</script>
</body>
</html>
When i click on canvasImg its throwing an error
Uncaught TypeError: Object #<NodeList> has no method 'toDataURL'
I have made a fiddle here
Can any one point out whats going wrong?
DEMO
document.getElementsByTagName returns array of elements objects, and no array objects have method toDataUrl
instead of this
var c = document.getElementsByTagName("canvas");
use
var c = document.getElementsByTagName("canvas")[0];
function myFunction() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = document.getElementById("canvasImg");
context.drawImage(img, 0, 0);
}
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