Using createElement on canvas as a temporary placement to draw shapes and encounter an error. Does the canvas have to be visible before convert to image or what is the solution to create canvas and flatten into an image?
var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd=convertCanvasToImage(ctx1)
console.log(asd)
function convertCanvasToImage(aaa) {
var image = new Image();
image.src = aaa[0].toDataURL("image/png");
return image;
}
Your code reads like this
var ctx = document.createElement("canvas");
var ctx1 = ctx.getContext("2d");
var asd = convertCanvasToImage(ctx1)
function convertCanvasToImage(aaa) {
something = aaa[0].toDataURL("image/png");
}
see how you pass the context to the function, so really you're doing
var ctx = document.createElement("canvas");
var ctx1 = ctx.getContext("2d");
var asd = ctx1[0].toDataURL("image/png");
However, the context is not an array, and toDataURL is a method on the canvas element, not the context, so you should be doing
var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd = convertCanvasToImage(ctx)
console.log(asd)
function convertCanvasToImage(aaa) {
var image = new Image();
image.src = aaa.toDataURL("image/png");
return image;
}
Where you pass the canvas into the function, and access it's toDataURL method directly.
The argument isn't really neccessary either, as the default type is actually "image/png", and you only have to pass in an argument if you something other than png.
FIDDLE
Related
I have a html5 canvas where I am showing image as 350x450 pixles.
But actual size of image is 600x900 px.
How can I save it in original size.
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = 350;
ctx.canvas.height = 450;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = canvas.toDataURL();
As you see when Im getting base64 Image size is reduced. I am getting image 350x450. But I want to save it in 600x900.
Is there any way ?
Basically what I am doing in below code is that>
I am creating a temp canvas element with display: none style & also load an image into that and save from this while show original canvas.
var canvas = document.getElementById('my_canvas');
var tempCanvas = document.getElementById('temp_canvas'); // use style display : none for this temp element
var ctx = canvas.getContext('2d');
var tempCtx = tempCanvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = 350;
ctx.canvas.height = 450;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
tempCtx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = tempCanvas.toDataURL();
This is my code:
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 990;
canvas.height = 409;
canvas.style.display='block';
var style=canvas.style;
style.marginLeft="auto";
style.marginRight="auto";
var position=1;
var background = new Image();
background.src="backdrop3.jpg";
var currentImage= new Image();
document.body.appendChild(canvas);
ctx.drawImage(background, 0, 0);
For some reason, nothing appears on my html canvas. Ive already checked that the file for the background is in the same location and it is. What could be the problem?
You need to draw the image onto the canvas after it has loaded, like this:
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 990;
canvas.height = 409;
canvas.style.display='block';
var style=canvas.style;
style.marginLeft="auto";
style.marginRight="auto";
var position=1;
var background = new Image();
background.src="backdrop3.jpg";
// the important bit
background.onload = function () {
ctx.drawImage(background, 0, 0);
}
document.body.appendChild(canvas);
I know this question has been asked many times. However, I have used img.onload to properly execute what will be drawn to the canvas after the image is loaded. I am new to javascript and having trouble figuring it out. I have done the whole code in a function and calling it from the init() function. This init() function triggers when the body is loaded.
I have two images here. Both of them does not load at the first time.
function getAboutMeImage(){
var galleryCanvas = document.createElement("Canvas");
var galleryContext = galleryCanvas.getContext('2d');
galleryCanvas.width = 800;
galleryCanvas.height = 600;
galleryCanvas.style.position = "absolute";
galleryCanvas.style.display = "block";
galleryCanvas.style.top = "50%";
galleryCanvas.style.left = "50%";
galleryCanvas.style.marginLeft = "-400px";
galleryCanvas.style.marginTop = "-250px";
galleryCanvas.setAttribute("id","canvas2");
//galleryCanvas.style.background = "#FFF";
document.body.appendChild(galleryCanvas);
var points = [];
points[0] = new Array(0.3,1.3,0.55,1.05,2.9,1.05,3.1,0.75,9.25,0.75,9.9,1.3,9.9,6.3,9.6,6.6,5.75,6.6,5.3,7.0,2.5,7.0,1,4.3,0.3,4.3,0.3,1.3);
var points1 = [];
points1[0] = new Array(3.2,1,9.25,1,9.25,6.4,3.2,6.4,3.2,1);
drawPoly(galleryCanvas.width,0,0,11.0,7.0,galleryCanvas,points,"rgba(194,242,227,.2)",'#c2f2e3',10);
drawPoly(galleryCanvas.width,0,0,11.0,7.0,galleryCanvas,points1,"#000","#000",0);
//debugCanvas(galleryCanvas);
var y = Math.round((7.0 / 11.0) * galleryCanvas.width);
var width = Math.round(galleryCanvas.width / 11.0);
var height = Math.round(y / 7.0);
var img = new Image();
img.onload = function() {
var canvas2 = document.getElementById("canvas2");
var ctx2 = galleryCanvas.getContext("2d");
ctx2.drawImage(img,0.4 * width, 1.2*height, img.width, img.height);
};
img.src = "../logo.png";
var ratio = img.height * 1.0/ img.width;
img.width = Math.round(width*2.7);
img.height = Math.round(ratio * img.width);
var img2 = new Image();
img2.src = "../about me background2.png";
var ratio = img2.height * 1.0/ img2.width;
img2.width = Math.round(width*2.8);
img2.height = Math.round(ratio * img.width);
img2.onload = function(){
var ctx3 = galleryCanvas.getContext("2d");
ctx3.drawImage(img2,0.4 * width, 2*height, img2.width, img2.height);
}
setupAboutMe(galleryCanvas,galleryCanvas.width,20,0);
return galleryCanvas.toDataURL();
}
So, what am I doing wrong?
General advice:
Are both the onload callbacks being triggered?
If not, check the image .src.
Also, check the values you are sending into drawImage.
Are the resulting x,y off the visible canvas area?
Are the resulting width,height zero or near zero?
I am using HTML5 canvas and putting two images there but I am facing one problem which is, one image is loaded and visible in chrome but another image is only visible in mozilla but after refresh. I don't know why this is happening as I am new in canvas.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 900;
var height = 700;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg';
var startImageObj = new Image();
startImageObj.onload = function() {
context.drawImage(startImageObj, (canvas.width-startImageObj.width)/2, (canvas.height-startImageObj.height)/2)
};
startImageObj.src = 'http://assets.halfbrick.com/yc/v3/images/button-play.png';
<canvas id="canvas" width="900" height="700"></canvas>
fiddle
As onload event is asynchronous, make sure play-button is being set in the onload-handler of the base-image
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 900;
var height = 700;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
var startImageObj = new Image();
startImageObj.onload = function() {
context.drawImage(startImageObj, (canvas.width - startImageObj.width) / 2, (canvas.height - startImageObj.height) / 2)
};
startImageObj.src = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5670-200.png';
};
imageObj.src = 'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg';
<canvas id="canvas" width="900" height="700"></canvas>
#Rayon's answer is right in that with your current implementation you can't know which image will have loaded first, but IMO it is wrong to wrap everything in the same callback, since you will have to wait for the first image has loaded before trigger the loading of the next one, whcih will produce a flicker apparition of the last image.
Instead, create a preloader function that will trigger a drawing function when both images have been loaded.
This has the advantage to make it easier to call your drawing function later, and also to keep your code a bit cleaner :
/* preloader
inputs :
an array containing the urls of the images to load,
a callback function called when all the images have loaded
outputs:
an array containing all the image elements in the same order has the urls where provided
*/
function preloader(imageURLs, callback) {
var toLoad = imageURLs.length,
toReturn = [],
decrement = function() {
if (--toLoad <= 0) {
callback();
}
};
imageURLs.forEach(function(url) {
var img = new Image()
// you may want to include a more verbose error function
img.onload = img.onerror = decrement;
img.src = url;
toReturn.push(img);
});
return toReturn;
}
function draw() {
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(front, (canvas.width - front.width) / 2, (canvas.height - front.height) / 2);
}
var ctx = canvas.getContext('2d'),
urls = [
'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg',
'https://d30y9cdsu7xlg0.cloudfront.net/png/5670-200.png'
],
images = preloader(urls, draw),
background = images[0],
front = images[1];
<canvas id="canvas" width="900" height="700"></canvas>
I need help with the following resource http://www.filmfans.cz/test/index2.html
I don't know how to change the colours of the pinquen after the click on the sample.
I would like to do something similar as in the following link http://www.pixelbox.sk/fileadmin/Flash/cosmo_2.swf
Here is my code
$(window).load(function(){
var width = $(window).width();
var height = $(window).height();
var c = document.getElementById("a");
var ctx = c.getContext("2d");
var can2 = document.createElement('canvas');
document.body.appendChild(can2)
can2.width = c.width;
can2.height= c.height;
var ctx2 = can2.getContext("2d");
var test= new Image();
test.src = "tux.png";
test.onload = function() {
ctx2.drawImage(test, 0, 0);
}
var img = new Image();
img.src = "2.png";
img.onload = function(){
ctx2.globalCompositeOperation = "source-in";
var pattern = ctx2.createPattern(img, "repeat");
ctx2.fillStyle=pattern;
ctx2.fillRect(0,0,300,300);
}
});
$(document).ready(function () {
$('.klik').click(function() {
var adresa = $(this).children('img').attr('src');
var canvas = document.getElementById("a");
canvas.width = canvas.width;//blanks the canvas
var c = canvas.getContext("2d");
var img = new Image();
img.src = adresa;
img.onload = function(){
var pattern = c.createPattern(img, "repeat");
//c.globalCompositeOperation = "source-in";
c.fillStyle=pattern;
c.fillRect(0,0,300,300);
}
// c.drawImage(img, 0, 0);
//}
//return false;
});
});
</code>
</pre>
Problem solved !
Using a second, temporary canvas with source-in is the right idea:
ctx2.drawImage(test, 0, 0);
ctx2.globalCompositeOperation = 'source-in';
var ptrn = ctx2.createPattern(pattern,'repeat');
ctx2.fillStyle = ptrn;
ctx2.fillRect(0,0,300,300);
ctx.drawImage(can2,0,0)
live example:
http://jsfiddle.net/UcGrC/