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:
Related
Tried implementation an animated webp on canvas and its only taking the first frame.
https://codepen.io/Rajdeepc/pen/MWEyRqR
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'https://i.giphy.com/media/ftAP63cOawNMdjc3Zo/giphy.webp';
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
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>
I found out I cannot do that (adding text IN a picture) with HTML , I found a way with JAVA but I am intresting in finding a way by using Javascript.
You can do it using canvas,
<canvas id="canvas" width="340" height="340"></canvas>
Script,
function addTextToImage(imagePath, text) {
var circle_canvas = document.getElementById("canvas");
var context = circle_canvas.getContext("2d");
// Draw Image function
var img = new Image();
img.src = imagePath;
img.onload = function () {
context.drawImage(img, 0, 0);
context.lineWidth = 1;
context.fillStyle = "#CC00FF";
context.lineStyle = "#ffff00";
context.font = "18px sans-serif";
context.fillText(text, 50, 50);
};
}
addTextToImage("http://www.gravatar.com/avatar/0c7c99dec43bb0062494520e57f0b9ae?s=256&d=identicon&r=PG", "Your text");
http://jsfiddle.net/wAY6Y/
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/