Why doesnt anything appear on the canvas? - javascript

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);

Related

dataURL not working when the context of the canvas is an image

i was trying to download the context of the canvas as an image using dataURL() through the following code but it's not working for some reason. However, when i replace the context of the canvas to be something else besides the image it actually works, so can you tell how can i fix this
<a href="#" id="downloader" >Download!</a>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
image.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx.drawImage(image, 0, -60);
}
image.src = 'image.png';
$('#downloader').click(function(){
$(this).attr('href', document.getElementById('canvas').toDataURL("image/png").replace("image/png", "image/octet-stream"));
$(this).attr('download', "Picture.png");
});
</script>

Your JS should be:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
//First add src, then set the height and width
image.src = 'image.png';
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
// Draw image from start and not from behind the axis
ctx.drawImage(image, 0, 0);
}
$('#downloader').click(function() {
$(this).attr('href', document.getElementById('canvas').toDataURL("image/png"))
$(this).attr('download', "Picture.png");
});

HTML5 canvas save actual size image

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();

Drawing ends up all black

I'm trying to resize an image via HTML canvas, but when I display it, it displays all black.
My code
function onSuccess(imageData) {
var img = new Image();
img.src = imageData;
window.setTimeout(function() {
var maxSize = 200;
var canvas = document.createElement("canvas");
canvas.width = maxSize;
canvas.height = maxSize;
var ctx = canvas.getContext("2d");
ctx.drawImage(img.src, 0, 0, maxSize, maxSize);
dataurl = canvas.toDataURL("image/jpeg");
alert(dataurl);
}, 1000);
}
I'm not exactly sure what it is I'm doing incorrectly. Thanks for the help!

fill the image within the canvas

I have a base64 image string, I have created a canvas and put the base64 with the image and have given canvas height as 481 and width as 650, when I tried to display the image in html, image is coming but it is not completely filling the canvas,
Can anyone please tell me some solution to fill the image within the entire canvas, no matter what the quality of the picture.
My code is as given below
JSFiddle
var base64 = "data:image/jpeg;base64,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";
var canvas = document.createElement('canvas');
canvas.width = 650;
canvas.height = 481;
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0);
};
image.src = base64;
$('#showImage').html(canvas);

Change your onload function body to
ctx.drawImage(image, 0, 0, 650, 481);

Set the size of the canvas using natural width/height after the image has loaded:
var base64 = "data:image/jpeg;base64,/9j/4AAQSkZJ.....";
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
};
image.src = base64;
$('#showImage').html(canvas);

Can't use canvas method putImageData

I have following code:
var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
};
img.src = 'mwq.gif';
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx2.putImageData(imageData, 0, 0);
and i get image on first canvas element, when i check in console there is imageData, with width, lenght and pixel array, but somehow i can't get that image on another canvas element. I dont think there are typos, i rewrote same code several times, and at the end i stripped it to most minimal version without pixel manipulation, but it's still not working.

Your code isn't called in the onload callback, it's executed before the image is loaded so there is nothing to put.
You could change it to
var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx2.putImageData(imageData, 0, 0);
};
img.src = 'mwq.gif';

Categories