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>
Related
I am trying to take a pattern and apply it over a png image but only cover the non-transparent part of the image similar to this one.
http://jsfiddle.net/eLmmA/1/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'http://i.stack.imgur.com/QtQrZ.png';
}
img.src = 'http://i.stack.imgur.com/MDGFY.jpg';
document.body.appendChild(canvas);
});
The example above is really close to what I want but I need to be able to use a smaller texture image and repeat it over the none pattern image. I am not familiar with how to use canvas properly but trying to learn more about it.
Thanks in advance!
Never mind I figured it out.
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
var ptrn = canvas_context.createPattern(img, 'repeat');
canvas_context.fillStyle = ptrn;
canvas_context.fillRect(0, 0, canvas.width, canvas.height);
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = $('#base_url').data('base')+'assets/themes/img/download.png';
}
img.src = $('#base_url').data('base')+'assets/uploads/thumbs/1381413411Purple-Night-Owls-thumb.jpg';
$('#itemPreview').html(canvas);
I have 10 canvases on the same page. On each canvas I'm trying to add an existent image. Is this possible? I tried this next code but is not displaying any image:
var numberOfPages = $('.draw_pages canvas').length;
var i = 0;
var counter = 0;
for(i=0; i<numberOfPages; i++){
counter++;
var canvas = document.getElementById("canvas_"+counter);
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World "+ counter, 110, 250);
//add images to canvas
var base_image = new Image();
base_image.onload = function(){
init();
}
base_image.src = '../images/page_1.png';
function drawImage(){
ctx.drawImage(base_image, 0, 0, 575, 575);
}
function init(){
drawImage();
}
}
I've also tried this way, but it works only when I hit enter key on the url of the browser and the text is being drawed:
var numberOfPages = $('.draw_pages canvas').length;
var i = 0;
var counter = 0;
for(i=0; i<numberOfPages; i++){
counter++;
console.log(counter);
var canvas = document.getElementById("canvas_"+counter);
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World "+ counter, 110, 250);
//add images to canvas
drawImage();
function drawImage(){
base_image = new Image();
base_image.src = '../jester/images/page_1.png';
//base_image.onload = function(){
ctx.drawImage(base_image, 0, 0, 575, 575);
//}
}
}
Any ideas?
Be simple! Use jquery .each() and do Your operations inside of it.
$(function() {
$('canvas').each(function() {
var n = $(this).attr('id').split('_')[1];
var context = this.getContext('2d');
var image = new Image();
image.src = 'http://lorempixel.com/image_output/abstract-q-c-640-480-'+n+'.jpg';
image.onload = function(){
context.drawImage(image, 0, 0, 575, 575);
context.font = '30px Arial';
context.fillText('Hello World '+ n, 20, 20);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas_1"></canvas>
<canvas id="canvas_2"></canvas>
<canvas id="canvas_3"></canvas>
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 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/
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: