I am working on plotting pinpoint images over another image using canvas. I am new to canvas; kindly guide me further on this.
I have taken an img element and copied it in a canvas. Now I am trying to put another image over that canvas object but it's not working.
Here's my Fiddle.
HTML:
<p>Image to use:</p>
<img id="scream" src="https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button id="button1">Copy Imange</button></p>
<p><button id="button2">Draw OVer copied image</button></p>
Code:
$("#button1").click(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
});
$("#button1").click(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage("https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png",10,10);
});
There are a couple of issues. Firstly, you click events are both looking for the element $("#button1"). I'm assuming the second click event is supposed to be for $("#button2")
The next problem, in your second click event you are using drawImage from a URL to an image. You can't do that directly, you need to create a new image and set the source property like so:
var img2 = new Image();
img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
You also shouldn't set the canvas and context on every click, you only need to do that once. Here is the complete example (working example):
$(document).ready(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
var img2 = new Image();
img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
$("#button1").click(function(){
ctx.drawImage(img,10,10);
});
$("#button2").click(function(){
ctx.drawImage(img2,10,10);
});
});
Related
The publish output of Animate CC gives html file and js file. I want to draw the same drawing two times in the same canvas. From this example, i want to have output as
How can i change the javascript to achieve this without having two canvas tag? I want to have numerous instance of it in single canvas tag.
If you are trying to achieve the image above, you can simply create two instances of simple_canv class.
Try this:
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRootLeft = new lib.simple_canv();
exportRootRight = new lib.simple_canv();
exportRootRight.x = 555;
stage = new createjs.Stage(canvas);
stage.addChild(exportRootLeft, exportRootRight);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
init_app()
}
Also, remember to increase the width of your canvas.
Is this what you are looking for?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
var ctx2 = canvas.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(0,0,50,50);
ctx2.fillStyle = "blue";
ctx2.fillRect(50,0,50,50);
</script>
</body>
</html>
You can then change what you render.
I am trying to run this code but on click nothing happens.
I think the main problem is the image loading, because when I try
to draw the image that is loaded from an tag it works.
<html>
<body>
<canvas id="myCanvas" width="445" height="312"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "~/Images/my-meme.jpg";
ctx.drawImage(img, 0, 0, img.width, img.height);
}
</script>
</body>
</html>
You'll need to wait for the image to load before using it. For example,
var img = new Image(); // Create new img element
img.addEventListener("load", function() {
// execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path
See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images
I want to get html canvas image as javascript object. I looked samples from internet. But all samples are getting images from a source to canvas like this:
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
But my problem: There is an image on canvas element that created by pencil. I want to get that image as object and post to server. But I could not get.
have you tried canvas.toDataURL()?
more hardcore way might be canvas.getContext('2d').getImageData() would return ImageData object.
I'm working on converting a canvas to an image using dataurl. I have the following code that outputs no error in console. Seems to work somewhat, but when i access the dataurl it shows a blank image.
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
var myImage = context.drawImage(imageObj, 0, 0);
var myImg = canvas.toDataURL("image/png");
document.getElementById("canvasimg").setAttribute("src", myImg);
};
imageObj.src = "http://img801.imageshack.us/img801/5641/3cc67ca1a74049ce99bc92b.png";
};
<canvas id="myCanvas" width="578" height="400"></canvas>
<img id="canvasimg" alt="" src="">
Look at what you are doing. You are drawing the image when the image loads, but you are converting it to a data url before the image has been drawn! Move that toDataURL call and the setAttribute call INSIDE the onload function.
Testing the code you have posted, I get a Security Error raised. Which is to be expected. The canvas has a clean-origin flag, and once that flag is false, you can't pull data out of it.
Here's a more detailed, related question
Documentation linked to in the answer
I'm trying to place an image on a canvas without resizing it. I thought drawImage(img, x, y) would do the trick, but it stretches the image to fill the canvas.
Also supplying drawImage(img, x, y, width, height) with the dimensions of my image doesn't seem to work.
Here's my code:
<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Thanks in advance!
PS: I added the parseInt's to make sure that drawImage gets valid values.
Don't use CSS to size your canvas. That creates a default sized canvas and stretches it. Set the canvas dimensions directly on it and you'll get a 1 to 1 pixel drawing space.
<canvas id="story" width="800" height="600" style="position:relative;"></canvas>
Trochoid is right, the style attribute on your canvas tag is causing problems. You could set it in the HTML, as he suggests, or better yet you can leave it blank and set it dynamically in the JS:
<canvas id="story"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
canvas.height=height;
canvas.width=width;
context.drawImage(img, 0, 0);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Also make sure you get the width and height of the image and draw it AFTER it has been loaded.
img.onload = function () {
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
};
You have to first load the function image perfectly before rendering on the screen to do that follow the below code..
<img id="demo-img" src="image_name.png">
<br>
<canvas id="myCanvas" width="500" height="500" 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("demo-img");
img.onload=function fun(){ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)}
</script>
Try using this library I recently created which can load an image, resize it fixed width & height or precentage, convert to and from other formats like base64 or blob, and allows you to apply a watermark.
var CanvaWork = new CanvaWork();
CanvaWork.loadImage("yourimage.png", function(obj){
console.log(obj.canvas); // The usable canvas
console.log(obj.width);
console.log(obj.height);
console.log(obj.image); // Contains the image file
});
https://github.com/vnbenny/canvawork.js
Hope this helps you!