I have the following code that load image into my canvas:
<html>
<body>
<canvas id="myCanvas" width="900" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'Map.png';
var canvas = document.getElementById("myCanvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");
var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
</script>
I know how to draw a dot, But I want to know how to draw my marker (example green icon) on x,y on the image, how can i do that?
I have image with my marker, I just want to draw my image marker on my image map.
Thanks.
You have to do the same for your marker what you're doing for your map:
...
var markerObj = new Image();
markerObj.onload = function() {
context.drawImage(markerObj, x, y);
};
markerObj.src = 'marker.png';
...
JSBin
Related
I am trying to resize a canvas in all directions the way Photoshop does.
I tried with JS but it's not matching the output I got from the Photoshop CC canvas size feature.
Original Image (600 x 439): http://i.imgur.com/rXURSWC.jpg
Resized with JS code (580 x 430): http://i.imgur.com/fwUiHyF.png
Resized with Photoshop CC (Image->Canvas Size) (580 x 430): http://i.imgur.com/smXTNv2.jpg
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 580;
var height = 430;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'https://i.imgur.com/rXURSWC.jpg';
<body>
<canvas id="myCanvas" width="580" height="430"></canvas>
</body>
So, any idea how I can resize canvas in all directions the way photoshop CC does so that it can match to output of Photoshop CC.
JSFiddle: https://jsfiddle.net/f2L4b942/
What you are asking for is just to crop your image, but keep the anchor point in the middle.
This is easily implemented :
Set the x and y parameters of drawImage to the difference between the required size and the original one, divided by 2.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var requiredWidth = canvas.width = 580;
var requiredHeight = canvas.height = 430;
var img = new Image();
img.onload = function() {
// all you need is here
var offsetX = (requiredWidth - img.naturalWidth) / 2;
var offsetY = (requiredHeight - img.naturalHeight) / 2;
context.drawImage(img, offsetX, offsetY, img.naturalWidth, img.naturalHeight);
};
img.src = 'http://i.imgur.com/rXURSWC.jpg';
<canvas id="myCanvas" width="580" height="430"></canvas>
You could accomplish this by redefining the canvas width and height upon image load ...
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var imageObj = new Image();
imageObj.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
context.drawImage(imageObj, x, y);
};
imageObj.src = 'http://i.imgur.com/rXURSWC.jpg';
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid black;
}
<canvas id="myCanvas" width="580" height="430"></canvas>
I Have a issue about write text to image. I need loop the image. But i get some issue. When i do it , Last image showing and the images size is small. Do anyone help me ?
var div=document.getElementById("locations");
var canvas;
window.onload = function(){
for(var i=0;i<10;i++){
canvas=document.createElement("canvas");
canvas.style.width="75px";
canvas.style.height="75px"
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "17px Calibri";
context.fillText(i, 30, 36);
};
imageObj.src = "image.png";
div.appendChild(canvas);
};
}
<div id="locations"></div>
<canvas id="myCanvas" width="75" height="75"></canvas>
Result Image
Use canvas.height and width values instead of CSS style. CSS style values applied after canvas drawn.
var div=document.getElementById("locations");
var canvas;
window.onload = function(){
for(var i=0;i<10;i++){
canvas=document.createElement("canvas");
canvas.width=75;
canvas.height=75;
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "17px Calibri";
context.fillText(i, 30, 36);
};
imageObj.src = "http://placehold.it/350x150";
div.appendChild(canvas);
};
}
<div id="locations"></div>
How do you make an image appear within an HTML5 Canvas of a certain height and width but have the image appear at 100% size? In other words, keep the image's aspect ratio size intact.
Tree image = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg'
I want this image of the above tree to be at 100% size within something you can scroll.
E.g. like the "overflow: scroll" option shown in blue.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
The image must be use be sourced in Javascript.
Javascript:
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = 100; ctx.canvas.height = 100;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';
Html
<canvas id="my_canvas"></canvas>
Here's a JSFIDDLE but the image is of Google. As you can see it is clearly resized/crunched. Instead I want the full size image to be seen there and some sort of scroll option.
http://jsfiddle.net/jzF5R/
Thanks!
by getting the width and height of the img, after the image loaded and then set the canvas.width and canvas.height to it you can set the right size of the canvas
after this you need to draw the image on the canvas on the right perspective, this done be setting the imageObj then set the left top corner to 0,0 and the right bottom corner to the width,height of the image
you can read more about it int this link
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = document.getElementById('img');
imageObj.onload = function(e) {
ctx.canvas.width = imageObj.width;
ctx.canvas.height = imageObj.height;
ctx.drawImage(imageObj, 0, 0,imageObj.width,imageObj.height);
};
imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';
canvas{
width:100%;
height:100%;
position:absolute;
}
<canvas id="my_canvas"></canvas>
<img style='display:none;'id='img'/>
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);
};
imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';
<canvas id="my_canvas" style="border:2px solid;"></canvas>
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
alert(window.innerWidth+"X"+window.innerHeight);
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);
};
imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';
this may help.. :)
It is because there is a difference between the real width of your canvas and the width of your box.
So, if you do this, that should work :).
var canvas = document.getElementById('my_canvas');
// What you have to add:
// You can choose clientWidth, offsetWidth... that depends on what you want.
canvas.width = canvas.offsetWidth;
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';
ADD CSS
#my_canvas{
width:100%;
}
I want to display a image on canvas and insert a text on top of that image.
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 10, 10);
};
imageObj.src = "darth-vader.jpg";
context.font = "40pt Calibri";
context.fillText("My TEXT!", 20, 20);
};
I'm getting only an image over here but not the text; the text is behind the image.
How to insert the text on top of the image?
That is because you draw the text before the image has loaded and been drawn. You have to draw the text that should be on top of the image after the image is drawn. Try this code instead:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 10, 10);
context.font = "40pt Calibri";
context.fillText("My TEXT!", 20, 20);
};
imageObj.src = "darth-vader.jpg";
};
Example:
Why is there a difference between how things are handled in a canvas? E.g if I put a png on the canvas vs draw a line on the canvas. When I copy that canvas's content to another canvas, only the line gets copied over.
var thecanvas = document.getElementById('mycanvas');
var context = thecanvas.getContext('2d');
// put a png on the canvas
var img = new Image();
img.onload = function(){ context.drawImage(img,0,0); };
img.src = 'images/test.png';
// draw a line on the canvas
context.moveTo(100, 150); context.lineTo(450, 50); context.stroke();
final_image = thecanvas.toDataURL("image/png");
copyimg = new Image();
copyimg.src = final_image;
var newcanvas = document.getElementById('newCanvas');
var newcanvascontext = newcanvas.getContext('2d');
// why is only the line I drew copied over and not the png image???
newcanvascontext.drawImage(copyimg,0,0,397,397);
Please note the image load event. Canvas is copied before the image gets loaded. You have to do like this
var thecanvas = document.getElementById('mycanvas');
var context = thecanvas.getContext('2d');
// put a png on the canvas
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);
var newcanvas = document.getElementById('newCanvas');
var newcanvascontext = newcanvas.getContext('2d');
newcanvascontext.drawImage(thecanvas,0 ,0);
};
img.src = 'http://www.mygreatiphone.com/wp-content/uploads/2011/11/google.png';
// draw a line on the canvas
context.moveTo(100, 150); context.lineTo(450, 50); context.stroke();
See the demo : http://jsfiddle.net/diode/3NHXy/5/